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.
(Default) Adaptive, Brand | |
(Default) False, True | |
(Default) Medium, Small | |
(Default) Internal, External | |
(Default) True, False |
Variant
Die Link Komponente gibt es in zwei Varianten. Die Adaptive Variante kann sich an verschiedene Umgebungen anpassen und ist somit für die meisten Anwendungsfälle geeignet. Die Brand Variante kann zur Hervorhebung einzelner, wichtiger Links verwendet werden.
Disabled
Die Disabled-Property legt fest, ob der Link aktiv oder inaktiv ist. Bei Disabled = False ist der Link interaktiv und unterstützt Zustände wie Hover, Pressed und Focused. Wenn Disabled = True gesetzt ist, wird der Link inaktiv und zeigt keine interaktiven Zustände mehr. In diesem Fall ist er nicht klickbar.
Size
Die Size-Property bestimmt die physikalische Größe des Links. Hierbei kann zwischen Medium als Default-Größe für vielseitige Anwendungen und Small als kompakterer Link für begrenzten Platz oder spezielle Anforderungen gewählt werden.
Content
Content unterscheidet zwischen internen und externen Links. Internal Links verweisen auf Bereiche innerhalb der Anwendung oder Website, während External Links zu externen Ressourcen führen.
Show Icon
Die Show-Icon-Property legt fest, ob das Icon im Link angezeigt wird. Der Standardwert ist True, bei dem ein Icon angezeigt wird. Wenn die Property auf False gesetzt ist, wird kein Icon dargestellt.
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 | |
|---|---|---|
Padding-H | db-spacing-fixed-2xs | db-spacing-fixed-3xs |
Icon Size | db-base-icon-font-size-md | db-base-icon-font-size-sm |
Text Size | db-type-body-md-regular | db-type-body-sm-regular |
Kurz, Knackig, Klar
Setze die Link-Komponente ein, wenn
- zu einer anderen Seite innerhalb der Anwendung navigiert werden soll.
- zu einer völlig anderen Seite navigiert werden soll.
- zu einem Element auf derselben Seite gesprungen werden soll.
- E-Mails oder Telefonnummern verlinkt werden.
Guidelines to Go
- Die Brand Variante dient zur Hervorhebung einzelner wichtiger Links.
- Inline-Links innerhalb von Fließtext sind reine Text-Links ohne Icon. Verwende hier nicht die Link-Komponente.
- Button für Aktionen und Links für Navigation verwenden.
Variante
Wähle standardmäßig die Adaptive Variante des Links für deine Anwendung oder Website.
Die Brand Variante kann zur Hervorhebung einzelner, wichtiger Links verwendet werden.
🟢 Ein wichtiger Link ist hervorgehoben.🔴 Mehrere Links sind hervorgehoben.
Die Variante ohne Icon (Show Icon - False) ist ideal für einfache, textbasierte Links außerhalb von Fließtexten. Sie sorgt für ein übersichtliches und aufgeräumtes Design und wird oft in Bereichen wie dem Footer eingesetzt, um mehrere Links klar und strukturiert darzustellen.
Setze die Link-Komponente nicht als Inline-Link innerhalb eines Fließtextes ein. Text-Links werden unterstrichen und haben kein Icon.
🟢 Verwende Text-Links für Verlinkungen innerhalb eines Fließtextes.🔴 Nutze die Link Komponente nicht innerhalb eines Fließtextes.
Button oder Link?
Verwende keine Link-Komponente für Aktionen, die Daten ändern oder deren Anzeige manipulieren, einen Status ändern oder eine Aktion auslösen. Nutze stattdessen die Button Komponente.
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