Pagina-metagegevens

Algemene informatie over de site kan bovenaan de pagina weergegeven worden. Denk hierbij aan informatie over beschikbare talen van de pagina, of een bepaalde weergave bijvoorbeeld op basis van een ingelogd account.

Beschikbare voorbeelden:

Login-gegevens

Aandachtspunten:

• Voeg bovenaan de pagina, direct binnen de <header>, of indien aanwezig direct onder de "ga-direct-naar-inhoud-knop", een sectie toe met de class page-meta om pagina-metagegevens toe te voegen.
• Voeg binnen deze sectie de login-gegevens toe door middel van een <div class="login-meta">.
• Het toevoegen van een link bij de gebruikersnaam is optioneel.

Visueel voorbeeld:

Ga direct naar inhoud

Ingelogd als: Jane Doe

Rijksoverheid

Html-voorbeeld:

            
<header>
  <a href="#main-content" class="button focus-only">Ga direct naar inhoud</a>

  <section class="page-meta">
    <div class="login-meta">
      <p>Ingelogd als: <a href="">Jane Doe</a></p>
    </div>
  </section>

  <!-- Overige header content -->
</header>
              
            

Taalselectie

Aandachtspunten:

• Voeg bovenaan de pagina, direct binnen de <header>, of indien aanwezig direct onder de "ga-direct-naar-inhoud-knop", een sectie toe met de class page-meta om pagina-metagegevens toe te voegen.
• Voeg binnen deze sectie de taalselectie toe door middel van een <div class="language">.

Visueel voorbeeld:

Ga direct naar inhoud

Nederlands English

Rijksoverheid

Html-voorbeeld:

            
<header>
  <a href="#main-content" class="button focus-only">Ga direct naar inhoud</a>

  <section class="page-meta">
    <div class="language">
      <a href="">Nederlands</a>
      <a href="" lang="en">English</a>
    </div>
  </section>

  <a href="" class="ro-logo">
    <img src="static/img/ro-logo.svg" alt="Logo Rijksoverheid">
    Rijksoverheid
  </a>
</header>