Components

Weiterleitung

Sie werden in Sekunden weitergeleitet.

Falls keine Weiterleitung erfolgt, klicken Sie auf den Link:

Es ist etwas schief gelaufen.

Upps - das Senden Deiner Anfrage ist fehlgeschlagen. Du kannst uns aber immer via E-Mail erreichen.
Components--Teaserbild

Alle Komponenten

Entdecke unsere Komponentenbibliothek! Finde vorgefertigte UI-Komponenten in 7 Kategorien: Layout, Navigation, Action, Data Input, Data Display, Feedback und Utility. So wird Design und Development effizienter und konsistenter.

Accordion

Das Accordion ist eine platzsparende und übersichtliche Möglichkeit, Inhalte zu strukturieren und zu präsentieren …

Beta

Backdrop

Der Backdrop ist eine Hilfskomponente, die eine abgedunkelte Ebene hinzufügt, um bestimmte Inhalte hervorzuheben oder …

Beta

Badge

Badges sind visuelle Indikatoren, um wichtige Informationen hervorzuheben und den Status von Elementen, Komponenten …

Button

Buttons werden verwendet, um Nutzer:innen zur Interaktion mit der Benutzeroberfläche aufzufordern und eine Aktion auszulösen.

Card

Die Card-Komponente sind schattierte und abgerundete Flächen, die dem Interface Tiefe geben. Ob statisch oder interaktiv …

Beta

Checkbox

Checkboxen ermöglichen es Nutzer:innen, aus einer Liste von einander unabhängigen Optionen eine Mehrfachauswahl zu …

Custom Select

Das Custom Select beinhaltet ein Single- und Multiselect mit integrierter Suchfunktion. Es besteht aus einem Form Field …

Beta

Divider

Ein Divider ist eine dünne Linie, die horizontal oder vertikal zwischen den Elementen verläuft. Divider gruppieren …

Beta

Drawer

Eine Drawer ist ein Inhaltsbereich, der sich von der Seite, von oben oder unten über den Seitencontent schiebt und …

Header

Ein Header definiert den oberen Bereich einer Seite. Er enthält eine Brand-Section, die Navigation und optionale Elemente, …

Beta

Infotext

Die Infotext Komponente bietet eine klare und prägnante Darstellung von Textinhalten, um Nutzer:innnen zusätzliche …

Input

In Textfeldern können Nutzer:innen Text eingeben und bearbeiten. Ein Floating Label als Beschriftung weist auf den …

Link

Links werden als Navigationselemente verwendet. Sie können alleinstehend, innerhalb eines Satzes oder Absatzes oder …

Navigation

Eine Navigation bietet eine dauerhafte Möglichkeit, zwischen den wichtigsten Zielen in einer App oder Seite zu wechseln.

Beta

Notification

Notifications dienen zur Benachrichtigung in verschiedenen Situationen und werden dabei in semantische sowie neutrale Varianten …

Beta

Popover

Ein Popover ist eine schwebende Card, die bei Klick oder Hover über dem Anwendungsinhalt geöffnet wird. Sie zeigt …

Beta

Radio

Radio Buttons ermöglichen es, eine Option aus einer Liste von sich gegenseitig ausschließenden Optionen auszuwählen.

Section

Die Section wird dazu genutzt, um Content-Bereiche voneinander zu trennen. Einstellbar sind hierbei die Abstände zum …

Beta

Select

Select-Felder bieten eine Dropdown-Liste, aus der eine Option ausgewählt werden kann. Sie kommen in Formularen …

Switch

Switches ermöglichen es den Nutzer, zwischen zwei Zuständen zu wechseln, wie z. B. ein- und auszuschalten.

Beta

Tag

Ein Tag ist ein visuelles Element, das Stichwörter oder kurze Beschreibungen kennzeichnet und Inhalte organisieren, …

Textarea

Die Textarea ist ein Eingabeelement, das Nutzer:innen ermöglicht, mehrzeilige Texte einzugeben und zu bearbeiten …

Tooltip

Der Tooltip liefert zusätzliche Kontextinformationen, wenn der Benutzer über ein Element hovert. Dadurch können …

Beta

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