Principes Bases Accessibilité Système de design Guidelines Deutsch Français Italiano English Nos principes de design Centré sur l’utilisateur Reconnaissable Inclusif Minimaliste Holistique Auto-explicatif Axé sur les tâches Approprié Portail de la marque CFF Logo Horloge numérique Droits d’utilisation Couleurs de base Couleurs supplémentaires Couleurs off-brand Icônes Icônes de l’horaire Pictogrammes À propos de l’accessibilité À propos de ce guide Contact Informations complémentaires Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Conception Développer FAQ Aide Procès Contribution Contact Aperçu Base Composants Aperçu Releases Design Tokens Composants Aperçu Base Informations Aperçu Base Composants Aperçu Power-Apps Bandeaux publicitaires numériques SAP IA Design : Bases Icônes d’applications Cette page n'est pas disponible dans la langue souhaitée. Langues disponibles: Deutsch English Header Übersicht

Was macht die Komponente?

  • Bietet den Benutzer*innen jederzeit zugängliche Informationen und Funktionen an.

Wann soll die Komponente eingesetzt werden?

  • Ein Header ist bei jeder Anwendung einzufügen.

Regeln

  • Der Header besteht aus App-Chooser (optional, bei Applikationsgruppen), Umgebungsbanner (ausser Prod), Applikationsname und Version, Hauptnavigation (falls notwendig), Suche (optional), Anzeige für Benachrichtigungen (optional), Usermenü und Logo.
  • Bei Tablet wird die Hauptnavigation in die Burgernavigation verschoben. Bei Mobile zusätzlich noch die Suche, Benachrischtigungen und das Usermenü.
  • Der Applikationsname wird bei Mobile mit "..." abgeschnitten, wenn es nicht genügend Platz hat.
 Varianten

Varianten

Standard

Diese Variante hat folgende Zustände:

  • Default

Darstellung des Headers


Diese Variante hat folgende Zustände:

  • Collapsed
  • Expanded
  • Hover

Darstellung des Headers mit Unternavigation


Suite

Diese Variante hat folgende Zustände:

  • Collapsed
  • Expanded

Darstellung des Headers mit der Navigation einer Suite zum Wechsel zwischen Anwendungen


Spezifikationen

DesignCode
Contact

Vous avez des questions ? Vous trouverez peut-être une réponse dans notre FAQ ou notre aide, sinon vous pouvez poser votre question sur le board correspondant sur Github.

Impressum Contact Protection des données Paramètres des cookies