FigmaOpenCode

Kopfzeile

Synonyme: Header
Ähnliche Komponenten: -

Kurzbeschreibung

Die Kopfzeile ist dafür gedacht, dem Bürger:in zu zeigen, dass dies eine offizielle Seite der Bundesrepublik Deutschland ist.

Beispiele

Fluid Kopfzeile

Code anzeigen

<div class="kern-kopfzeile">
<div class="container-fluid">
  <div class="kern-kopfzeile__content">
    <span class="kern-kopfzeile__flagge" aria-hidden="true">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 16">
        <path fill="#000" d="M0 .5h24v5.333H0z" />
        <path fill="red" d="M0 5.833h24v5.333H0z" />
        <path fill="#FACA2C" d="M0 11.167h24V16.5H0z" />
      </svg>
    </span>
    <span class="kern-kopfzeile__label">
      Eine offizielle Website der Bundesrepublik Deutschland
    </span>
  </div>
</div>
</div>

Container Kopfzeile

Code anzeigen

<div class="kern-kopfzeile">
<div class="container">
  <div class="kern-kopfzeile__content">
    <span class="kern-kopfzeile__flagge" aria-hidden="true">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 16">
        <path fill="#000" d="M0 .5h24v5.333H0z" />
        <path fill="red" d="M0 5.833h24v5.333H0z" />
        <path fill="#FACA2C" d="M0 11.167h24V16.5H0z" />
      </svg>
    </span>
    <span class="kern-kopfzeile__label">
      Eine offizielle Website der Bundesrepublik Deutschland
    </span>
  </div>
</div>
</div>

Verwendungsregeln

Platzierung: Die Kopfzeile sollte immer am oberen Rand der Webseite platziert werden.