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.
Width
In der Full-Variante der Section nimmt diese die maximale Breite von 100% ein und sich an den Bildschirmrand anpassen. Die Small-Variante zeigt den Content in einer fixen Breite von 768px an und ist horizontal zentriert.Die Medium-Variante zeigt den Content in einer fixen Breite von 1024px an und ist horizontal zentriert.Die Large-Variante der Section hat eine fixe Breite von 1440px für den Content und ebenfalls zentriert.
💡Öffne die Preview in einem neuen Tab für die 1:1 Darstellung.
Spacing
Die Spacings verhalten sich responsiv.Medium ist die Standard-Variante mit mittleren Abständen nach oben und unten der Sections.Large ist die große Größenvariante der Spacings und eignet sich für Abschnitte, die im Vordergrund stehen sollen. Small ist die kleine Größenvariante der Sections und eignet sich für Abschnitte, bei denen Platz eingespart werden muss.None zeigt in den Abschnitten nach oben und unten keine Abstände.
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 | Large | None | |
|---|---|---|---|---|
Padding-V | db-spacing-responsive-md | db-spacing-responsive-sm | db-spacing-responsive-lg | - |
Padding-H | db-spacing-fixed-lg | db-spacing-fixed-lg | db-spacing-fixed-lg | db-spacing-fixed-lg |
Hey du! Schön, dass du hier bist. Leider sind die Informationen, die du gerade suchst, noch nicht (vollständig) verfügbar. Aber keine Sorge, wir arbeiten bereits daran, diese Seite mit allen wichtigen Details zu füllen. Komme gerne etwas später wieder vorbei!🙂
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