Header

Die Header-Komponente bildet den oberen Bereich einer Seite oder Anwendung.
Sie kann Branding, Navigation oder Aktionen wie Theme-Wechsel enthalten.

Beispiele

Basic

Ein einfacher Header mit Branding.

DK97 UI


<header class="o-header">
    <a class="o-header__brand" href="/">
        DK97 UI
    </a>
</header>

With Actions

Ein Header mit Aktionsbereich, zum Beispiel für Buttons oder Theme-Wechsel.

DK97 UI


<header class="o-header">
    <a class="o-header__brand" href="/">
        DK97 UI
    </a>

    <div class="o-header__actions">
        <button class="a-button -tertiary -blue" type="button">
            <span class="a-button__icon a-icon">
                <svg aria-hidden="true">
                    <use href="/assets/icons/sprite.svg#settings"></use>
                </svg>
            </span>

            <span class="a-button__label">
                Einstellungen
            </span>
        </button>
    </div>
</header>

Klassen

Klasse	Beschreibung
`.o-header`	Container der Header-Komponente.
`.o-header__brand`	Branding oder Logo-Link innerhalb des Headers.
`.o-header__actions`	Bereich für Aktionen innerhalb des Headers.

Hinweise

Der Header sollte nur globale oder seitenübergreifende Elemente enthalten. Seitenspezifische Aktionen gehören eher in den jeweiligen Inhaltsbereich.

Best Practices

Verwende den Header für Branding, globale Navigation oder zentrale Aktionen. Die Inhalte sollten kurz und klar bleiben.

Überlade den Header nicht mit zu vielen Aktionen. Ein überfüllter Header erschwert die Orientierung.

Accessibility

Das Branding sollte als Link zur Startseite funktionieren. Interaktive Elemente im Header sollten klare Beschriftungen besitzen.