Statusbalken

Hauptkapitel
Designsystem
Unterkapitel
Komponenten
Gilt für
Webapplikationen (mit Login)

Darstellung und Verhalten

Applikationen

Der Statusbalken besteht aus:

  • Titel (h2 - h4)
  • Beschreibungstext
  • Grafische Darstellung Prozess. Pro Schritt werden angezeigt:
    • Titel des Prozessschritts.
    • Aktiver Schritt: die Zahl wird farbig markiert, der Name wird Bold.
    • Abgeschlossener Schritt: ein Häkchen-Icon wird dargestellt.

Der Statusbalken wird in der Akzentfarbe der Seite dargestellt, analog Infobox.

Desktop Verhalten

Auf grossen Screens ist die Grafische Darstellung des Prozesses horizontal ausgerichtet.

  • Das erste Element ist linksbündig dargestellt.
  • Mittlere Elemente sind zentriert ausgerichtet.
  • Das letzte Element ist rechtsbündig dargestellt.

Mobile Verhalten

Auf kleinen Screens ist die Grafische Darstellung des Prozesses vertikal ausgerichtet.

Verwendung

Der Statusbalken orientiert über den Fortschritt durch einen mehrstufigen Prozess. Er zeigt Nutzenden auf, in welchem Schritt sie sich aktuell befinden und wie viele Schritte sie noch vor sich haben.

Er dient der Information und nicht als Navigationselement. Daher wird er auch nicht interaktiv genutzt. Sollen Prozesse navigierbar sein verwenden wir das Prozessschritte-Element.

Den Statusbalken verwenden wir ab 3 bis 6 Schritten.

Kontakt

Digitale Verwaltung - ZHweb

E-Mail

zhweb@sk.zh.ch