Toggle Menu
base
Colors
Colors
Marketingportal Brand Colors - Primary
Marketingportal Brand Colors - Secondary
Marketingportal Brand Colors - Feedback
Marketingportal Brand Colors - POI
Marketingportal Brand Colors - Transport
Icons
Icons
Icon Library
DB Icons 16x16 - Filled - Action
DB Icons 16x16 - Filled - Navigation
DB Icons 16x16 - Filled - Notification
DB Icons 16x16 - Outline - Action
DB Icons 16x16 - Outline - Navigation
DB Icons 20x20 - Filled - Action
DB Icons 20x20 - Filled - AV
DB Icons 20x20 - Filled - Communication
DB Icons 20x20 - Filled - Feature
DB Icons 20x20 - Filled - Food
DB Icons 20x20 - Filled - IT
DB Icons 20x20 - Filled - Journey
DB Icons 20x20 - Filled - Maps
DB Icons 20x20 - Filled - Navigation
DB Icons 20x20 - Filled - Notification
DB Icons 20x20 - Filled - Ticket
DB Icons 20x20 - Filled - Transportation
DB Icons 20x20 - Outline - Action
DB Icons 20x20 - Outline - AV
DB Icons 20x20 - Outline - Brand
DB Icons 20x20 - Outline - Communication
DB Icons 20x20 - Outline - Covid 19
DB Icons 20x20 - Outline - Facilities
DB Icons 20x20 - Outline - Feature
DB Icons 20x20 - Outline - Food
DB Icons 20x20 - Outline - IT
DB Icons 20x20 - Outline - Journey
DB Icons 20x20 - Outline - Maps
DB Icons 20x20 - Outline - Navigation
DB Icons 20x20 - Outline - Notification
DB Icons 20x20 - Outline - Seat
DB Icons 20x20 - Outline - Ticket
DB Icons 20x20 - Outline - Transportation
DB Icons 24x24 - Filled - Action
DB Icons 24x24 - Filled - AV
DB Icons 24x24 - Filled - Journey
DB Icons 24x24 - Filled - Maps
DB Icons 24x24 - Filled - Navigation
DB Icons 24x24 - Filled - Notification
DB Icons 24x24 - Filled - Transportation
DB Icons 24x24 - Outline - Action
DB Icons 24x24 - Outline - AV
DB Icons 24x24 - Outline - Brand
DB Icons 24x24 - Outline - Communication
DB Icons 24x24 - Outline - Covid 19
DB Icons 24x24 - Outline - Facilities
DB Icons 24x24 - Outline - Feature
DB Icons 24x24 - Outline - Food
DB Icons 24x24 - Outline - IT
DB Icons 24x24 - Outline - Journey
DB Icons 24x24 - Outline - Maps
DB Icons 24x24 - Outline - Navigation
DB Icons 24x24 - Outline - Notification
DB Icons 24x24 - Outline - Seat
DB Icons 24x24 - Outline - Ticket
DB Icons 24x24 - Outline - Transportation
DB Icons 32x32 - Filled - Action
DB Icons 32x32 - Filled - AV
DB Icons 32x32 - Filled - Maps
DB Icons 32x32 - Filled - Navigation
DB Icons 32x32 - Filled - Notification
DB Icons 32x32 - Filled - Transportation
DB Icons 32x32 - Outline - Action
DB Icons 32x32 - Outline - AV
DB Icons 32x32 - Outline - Brand
DB Icons 32x32 - Outline - Communication
DB Icons 32x32 - Outline - Covid 19
DB Icons 32x32 - Outline - Facilities
DB Icons 32x32 - Outline - Feature
DB Icons 32x32 - Outline - Food
DB Icons 32x32 - Outline - IT
DB Icons 32x32 - Outline - Journey
DB Icons 32x32 - Outline - Maps
DB Icons 32x32 - Outline - Navigation
DB Icons 32x32 - Outline - Notification
DB Icons 32x32 - Outline - Seat
DB Icons 32x32 - Outline - Ticket
DB Icons 32x32 - Outline - Transportation
DB Icons 48x48 - Filled - AV
DB Icons 48x48 - Outline - AV
DB Icons 48x48 - Outline - Brand
DB Icons 64x64 - Filled - AV
DB Icons 64x64 - Outline - AV
DB Icons 64x64 - Outline - Brand
Illustration Icons
Type
Type
Fonts
Highlight Colors 1st Priority
Highlight Colors 2nd Priority
Highlight Colors Neutral
Highlight Colors Positive
View all Base
elements
Buttons
Buttons
Button
Button Brand Primary
Button Primary
Button Secondary Outline
Button Secondary Solid
Button Tertiary Plain
Button Sizes
Button Width
Checkbox
Checkbox
Checkbox
Checkbox Checked
Checkbox Disabled
Checkbox Disabled Checked
Checkbox - indeterminate
Checkbox - Hidden label
Checkbox On Dark Background
Checkbox On Dark Background Checked
Checkbox On Dark Background Disabled
Checkbox On Dark Background Disabled Checked
Checkbox - indeterminate on dark background
Chips
Chips
Filter chips
Selection chips
Chips with icon
Chips – disabled
Headline
Headline
Headline
Headline Pulse
Image
Image
Image
Image - AVIF
Image - Lazy loading
Image - Responsive and pixel density
Image - Responsive mediaquery
Image - WebP
Image - with caption
Input
Input
Input variations
Input
Input - Auto suggestions
Input with description
Input - filled with a value
Input - valid state
Input - invalid state (type in less than its minimum of 5 characters)
Input - Invalid state by HTML attribute
Input - disabled state
Input - search type
Input - search type - filled
Input - Hidden label
Link
Link
Links
Links Small
Loading Indicator
Loading Indicator
Loading Indicator
Loading Indicator Size S
Loading Indicator Size XS
Loading Indicator Size M
Loading Indicator Size L
Loading Indicator Size XL
Logo
Logo
Logo
Logo On Backgrounds
Logo Sizes
Logo With Following Headline
Progress
Progress
Linear loader
Linear spinner
Linear spinner indeterminate
Radio
Radio
Radios
Radios Checked
Radios Disabled
Radios Disabled Checked
Radios Invalid Attribute
Radio - Hidden label
Radios Required
Select
Select
Select
Select Variations
Select Variations Disabled
Select Variations Optgroups
Select - Invalid state by HTML attribute
Select - Hidden label
Tags
Tags
Tags
Tags Small
Tags With Icon
Textarea
Textarea
Textarea variations
Textarea
Textarea Disabled
Textarea with description
Textarea filled with a value
Textarea - valid state
Textarea - invalid state (type in less than its minimum of 5 characters)
Textarea - Invalid state by HTML attribute
Textarea - Hidden label
Toggle
Toggle
Toggle
Toggle Disabled
Toggle On
Toggle On Disabled
View all Elements
components
Accordion
Accordion
Accordion
Accordion High Emphasis
Accordion Sizes
Breadcrumb
Breadcrumb
Breadcrumb
Cards
Cards
Cards Banner
Dialog
Dialog
Dialog
Dialog Button Alignment End
Dropdown
Dropdown
Dropdown
Dropdown (within the header area) / opposite position
Form
Form
Example Form
Language Switcher
Language Switcher
Language switcher
Language switcher with buttons
Notifications
Notifications
Notifications
Notifications Variants
Notifications Hovering
Notifications - Leading Icon
Notifications - Trailing Icon
Overflow Menu
Overflow Menu
Overflow menu
Overflow menu - Navigation
Overflow menu / opposite position
Overflow menu - Navigation / opposite position
Pagination
Pagination
Pagination
Sidenavi
Sidenavi
Sidenavi
Tab Bar
Tab Bar
Tab Bar
Tab Bar Item Icon
Tab Bar Small
Tab Bar Small Item Icon
Table
Table
Table
Table - alignment
Table - border around cells
Table - border horizontal
Table - density
Table - font size
Table - icons
Table Overflow Menu
Table Row Title
Table - row zebra styling
Table - sticky header
Sample page with sticky header and sticky table header (open directly for demonstration purpose)
View all Components
areas
Footer
Footer
Footer
Footer With Border
Grid
Grid
Grid
Header
Header
Header
Header Loggedin
Meta
View all Areas
pages
Sample Page
All
px
/
em
Resize viewport to small
Small
Resize viewport to medium
Medium
Resize viewport to large
Large
Resize viewport to full
Full
Resize viewport to random
Random
Expand Panel
Switch Layout
Switch Theme
Open In New Tab
Pattern Lab Docs
Imprint
Datenschutzerklärung
Drag to resize Pattern Lab
Drag to resize Pattern Lab Drawer
Loading Code Panel
