beta

Header

1. Was macht die Komponente?

  • Bietet dem Benutzer jederzeit zugängliche Informationen und Funktionen an.

2. Wann soll die Komponente eingesetzt werden?

  • Ein Header ist bei jeder Webseite / jeder Anwendung einzufügen.

3. Regeln

  • Beim Scrollen wird der Navigationsbalken zum schmaleren Sticky-Header.
  • Beim Sticky-Header wird die Ebene 1 der Navigation ausgeblendet und mit einem Hamburger-Menü ersetzt.
  • Beim Klick auf das Hamburger-Menü wird der Header wieder in den Default-Zustand aufgeklappt.

4. Ausprägungen und Zustände

Die Komponente hat folgende Zustände:

  • Default
  • Collapsed

4.1 Standard

Design Spezifikation

4.2 Microsite Standard

  • In den Quicklinks wird immer zuerst sbb.ch Home angegeben.
  • Die Hauptnavigation ist frei wählbar.
  • Nebst dem Login wird nur noch die Suche angezeigt.

Design Spezifikation

4.3 Microsite mit eigenem Logo

  • Wenn dieser Header eingesetzt wird, muss zwingend dannach der «Footer Microsite mit eigenem Logo» verwendet werden.
  • In den Quicklinks wird immer zuerst sbb.ch Home angegeben.
  • Die Hauptnavigation ist frei wählbar.
  • Nebst dem Login wird nur noch die Suche angezeigt.

Design Spezifikation