Properties
Properties definieren die Eigenschaften und verschiedenen Ausprägungen einer Komponente. Sie ermöglichen, die Komponente flexibel an unterschiedliche Anforderungen anzupassen. Da Properties in Design und Entwicklung identisch sind, wird die Übergabe vereinfacht und die Konsistenz sichergestellt.
Semantic
Den Infotext gibt es in verschiedenen semantischen Varianten: Adaptive, Neutral, Critical, Informational, Successful und Warning. Die eingesetzten Farben unterstreichen den Informationsgehalt des jeweiligen Infotexts.
Size
Die Size-Property bestimmt die physikalische Größe des Infotexts. Hierbei kann zwischen "Medium” und “Small” gewählt werden.
Show Icon
Die Show-Icon-Property legt fest, ob das Icon im Infotext angezeigt wird. Der Standardwert ist True, bei dem ein Icon angezeigt wird. Wenn die Property auf False gesetzt ist, wird kein Icon dargestellt. Beachte hierbei die Accessibility-Guidelines.
Boxmodel
Das Boxmodel definiert den Aufbau einer Komponente. Es nutzt die unten genannten Tokens, um Konsistenz und Skalierbarkeit zu gewährleisten.
Token
(Default) Medium | Small | |
|---|---|---|
Spacing | db-sizing-fixed-2xs | db-sizing-fixed-2xs |
Icon Size | db-base-icon-font-size-sm | db-base-icon-font-size-xs |
Text Size | db-type-body-sm-regular | db-type-body-xs-regular |
Kurz, Knackig, Klar
Setze die Infotext-Komponente ein, wenn du
- Eingabefelder hast und Hinweise zur erwarteten Eingabe geben möchtest.
- Wichtige Hinweise oder Warnungen mitteilen möchtest.
- Fehlermeldungen kommunizieren musst und Lösungen anbieten willst.
- Komplexe Funktionen und Features erläutern möchtest.
- Die Nutzendenführung unterstützen und bei der Navigation helfen möchtest.
Guidelines to Go
- klar und prägnante Texte verwenden
- Richtige semantische Variante für Kontext verwenden
- Einsatz in Data-Inputs bei Validierung
- Nicht für Beispielbefüllung von Data-Inputs verwenden (➔ Placeholder Text).
- Einsatz ohne Icon nur in Ausnahmefällen ➔ auf sinnvollen Text achten
Text
Verwende die Infotext-Komponente, um wichtige Informationen klar und prägnant zu kommunizieren.
Setze den Bold-Schriftschnitt gezielt ein, um einzelne Wörter oder kurze Begriffe hervorzuheben. Markiere Schlüsselbegriffe, UI-Bezeichnungen oder kurze Anweisungen, damit dein Text leichter scannbar bleibt. Vermeide es, ganze Sätze oder viele Wörter fett zu setzen – das erschwert den Lesefluss und schwächt die Wirkung.
🟢 Hebe einzelne Wörter oder kurze Begriffe hervor, um die Aussage klar zu betonen.🔴 Setze nicht ganze Sätze oder viele Wörter in Fettdruck, da der Text sonst schwerer lesbar wird.
Kontext
Setze den semantischen Infotext im richtigen Kontext ein.
🟢 Wähle die passende semantische Ausprägung für den entsprechenden Kontext. (z.B. Warning bei Warnungen)🔴 Verwende den neutralen Infotext nicht für kritische Informationen.
Einsatz in Data Input-Komponenten
Der Infotext kann in Data Input Komponenten dynamisch eingeblendet werden, wenn eine Eingabevalidierung fehlschlägt oder zusätzliche Informationen benötigt werden. Der Text sollte (sofort) verschwinden, wenn der Fehler behoben ist.
Der Infotext der Date Input Komponenten sollte nicht dazu verwendet werden, Beispiele für das Ausfüllen zu geben. Hierfür ist der Placeholder Text vorgesehen, um temporär anzuzeigen, was als Eingabewert für das Feld erwartet wird.
🟢 Nutze für Eingabe-Beispiele innerhalb eines Inputs, den bereitgestellten Placeholder der Komponente.🔴 Verwende den Infotext des Inputs nicht für Eingabe-Beispiele.
Accessibility
Einsatz ohne Icon
Icons spielen eine zentrale Rolle, da sie Informationen visuell unterstützen und schneller erfassbar machen. Sie sollten nur in Ausnahmefällen ausgeblendet werden. Vorallem bei semantischen Infotexten wie “Critical” oder “Warning”, muss die Botschaft des Textes eindeutig formuliert sein, sodass der Kontext auch ohne visuelle Unterstützung klar verständlich ist und deutlich wird, dass es sich hierbei um eine Warnung bzw. einen kritischen Hinweis handelt.
🟢 Die Nutzung von Icons zur Unterstützung der Textbotschaft ist aus Accessibility-Sicht zu empfehlen.🟠 Das Ausblenden von Icons in der Infotext-Komponente muss jeweils individuell geprüft werden und ist aus Accessibility-Sicht grundsätzlich nicht zu empfehlen.
Du hast Fragen oder Input?
Wir haben alles dafür gegeben, dass unser Design System mit möglichst wenigen Regeln auskommt. So wird es einfach in der Anwendung, führt zu konsistenten Ergebnissen und stärkt die Marke Deutsche Bahn! Solltest du dir jedoch unsicher sein, Fragen oder einfach nur eine gute Verbesserungsidee haben, so sind wir gerne für dich da!
E-Mail schreiben Feedback in Github
Weiter