Zum Hauptinhalt springen
Version: 2.1.1
FigmaOpenCode

Kopfzeile

Synonyme: Banner, Site Banner, Identifier
Ähnliche Komponenten: -

Kurzbeschreibung​

Die Kopfzeile kennzeichnet digitale Auftritte der öffentlichen Verwaltung, wie Behörden, Online-Dienste oder Serviceportale.

Beispiele​

Fluid Kopfzeile​

Code anzeigen
<div class="kern-kopfzeile">
<div class="kern-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">
      Offizielle Website – Bundesrepublik Deutschland
    </span>
  </div>
</div>
</div>

Container Kopfzeile​

Code anzeigen
<div class="kern-kopfzeile">
<div class="kern-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">
      Offizielle Website – Bundesrepublik Deutschland
    </span>
  </div>
</div>
</div>

Beschreibung​

Die Kopfzeile ist eines von vier Elementen der digitalen Dachmarke. Die Nutzung der vier Kennzeichnungselemente folgt dem Prinzip der Freiwilligkeit. Mit der Kopfzeile wird ein Vertrauensanker geschaffen, der in Anlehnung an die Kopfzeile der EU-Websites gestaltet ist. Es handelt sich dabei um ein schmales Banner, das immer ganz oben über der Website platziert wird. Das Element scrollt mit dem Inhalt mit und darf nicht fixiert (sticky) gesetzt werden.
Die Kopfzeile enthält die Deutschlandflagge und den Schriftzug „Offizielle Website – Bundesrepublik Deutschland“, dieser steht immer rechts neben der Flagge.
Die Kopfzeile ist farblich hinterlegt. Der Hintergrund sollte stets die gesamte Breite des Browsers einnehmen. Der Inhalt (Flagge und Schriftzug) kann sich an den Seitenrändern des Websites-Inhalts orientieren, muss jedoch immer linksbündig ausgerichtet sein. In diesem Fall kann die „container”-Variante mit maximaler Breite des Contents eingesetzt werden, die beim Grid von KERN bei 1536 Pixel liegt. Bei der Variante „fluid” gibt es diesen Abstand zum Rand nicht. Die Schriftgröße ist in schmalen Browsern, z.B. auf Smartphones kleiner als in breiten Browsern, z.B. auf Laptops. Auch die Flagge skaliert kleiner. Alle Bestandteile der Kopfzeile (Schriften, Farben, Größen, Abstände, Wording) sind getestet, responsiv umgesetzt, auf Barrierefreiheit optimiert und übergreifend abgestimmt und dürfen daher nicht verändert werden.

Die Elemente der Dachmarke werden übergreifend eingesetzt, um Verwaltungsangebote vertrauenswürdiger und benutzerfreundlicher wirken zu lassen. Einheitliche, harmonisierte Oberflächen erleichtern die Wiedererkennung und schaffen Vertrauen.
Deshalb ist es besonders wichtig, keine abweichenden, individuell gestalteten Umsetzungen ohne Abstimmung mit dem Koordinierungskreis der Dachmarke zu veröffentlichen, da sie das übergeordnete Ziel der einheitlichen Nutzendenerfahrung schwächen würden.

Verwendungsregeln​

Die Kopfzeile wird in digitalen Auftritten von Behörden, Online-Diensten, Serviceportalen etc. eingesetzt. Sie trägt sofort zur besseren Orientierung der Nutzenden bei, indem sie eine eindeutige Identifikation offizieller Verwaltungsangebote ermöglicht. Die Platzierung ganz oben auf der Seite sorgt dafür, dass Nutzende die Kennzeichnung sofort wahrnehmen und den Absender des Angebots schnell erkennen können.

Nutzen der Kopfzeile​

  • Schnelle Wiedererkennbarkeit
  • Einfache kostengünstige Umsetzung
  • Vertrauensanker

Beispiele​

Dos and Don’ts​

  • Die Kopfzeile darf nur von öffentlichen Stellen eingesetzt werden, um digitale Auftritten der öffentlichen Verwaltung zu kennzeichnen. Das können z.B. sein: Serviceportale von Ländern, Kommunen, (EfA)-Online-Dienste der Verwaltung, Behörden-Auftritte, übergreifende Portale oder Landingpages (NFK, 115, ...).
  • Die Kopfzeile muss linksbündig mit dem Hauptinhaltsbereich ausgerichtet platziert werden, dies muss in der Regel manuell im Code umgesetzt werden.
  • Keines der Bestandteile darf in Größe, Farbe, Schrift, Inhalt oder Position verändert werden.
  • Die Kopfzeile muss immer ganz oben auf der Webseite positioniert sein, niemals zwischen Inhaltsblöcken oder ganz unten.
  • Das Banner scrollt mit dem restlichen Inhalt mit und bleibt nicht fixiert (kein „sticky“-Element).


Inhaltsverzeichnis