Prinzipien Grundlagen Barrierefreiheit Design System Guidelines Deutsch Français Italiano English Unsere Gestaltungsprinzipien Nutzerzentriert Wiedererkennbar Inklusiv Reduziert Ganzheitlich Selbsterklärend Aufgabenorientiert Passend SBB Markenportal Logo Digitale Uhr Nutzungsrechte Basis-Farben Funktionale Farben Off-Brand Farben Icons Fahrplan-Icons Piktogramme Über Barrierefreiheit Über diesen Guide Kontakt Weitere Informationen Product Owner User Research Interaction Design Visual Design Development Content Design Testing Was ist ein Design System?​ Designing Coding FAQ Hilfe Prozess Contribution Kontakt Übersicht Basis Komponenten Übersicht Releases Design Tokens Komponenten Übersicht Basis Informationen Übersicht Basis Komponenten Sinn & Zweck Community Assets Anleitung Power-Apps Digitale Werbebanner SAP App Icons Accordion

Übersicht

Was macht die Komponente?

Dient zur Strukturierung von Content in unterschiedliche Unter-Gruppen.

Wann soll die Komponente eingesetzt werden?

  • Wenn innerhalb des Content klare Untergruppen erstellt werden können.
  • Wenn die Untergruppen für den Benutzer zusätzliche Informationen zum Hauptinhalt bietet.
  • Hauptnutzinhalt des Contents sollte nicht in ein Akkordeon verpackt werden.

Regeln

  • Ein Akkordeon kann 1 bis n Einträge haben.
  • Per Default sind immer alle Akkordeons geschlossen.
  • Der Akkordeon-Header besteht immer aus einem Texttitel.
  • Der Titel darf maximal zweizeilig sein.
  • Icons im Titel sind nicht erlaubt.
  • Die ganze Fläche des Akkordeon-Headers ist klickbar und öffnet/schliesst das Akkordeon.
  • Es können mehrere oder alle Einträge gleichzeitig geöffnet sein. Alternativ kann die Funktion «immer nur ein Akkordeon aufgeklappt» eingesetzt werden.
  • Eine Akkordeon-Komponente innerhalb eines Akkordeon-Eintrags ist nicht erlaubt.
Zustände und Varianten

Zustände

Die Komponente hat folgende Zustände:

  • Collapsed
  • Expanded

Varianten

Standard

Darstellung des

Spezifikationen

DesignCode

Impressum Kontakt Datenschutz Cookie Einstellungen