Demo page with all components

Accordion

Auth Field

Enter username
Some hint
Your input is not valid.
Enter password

Badge

1 1234567890 2


1 1 1 1 1 1 1

Button

Default Size 50 Size 50 Variant Secondary Variant Tertiary Icons Left/Right With link behavior
Fill Parent button

Card V3

Default
 With link behavior
Sticky Elevation
Inverted Card
Card with 4 : 3 aspect ratio

Card V2

Default
With button behavior
With link behavior
Sticky Elevation
Inverted Card
Card with 4 : 3 aspect ratio

Chat Bubble

Hallo! Wie kann ich Ihnen heute helfen? Hallo! Ich interessiere mich für die neue Waschmaschine, die Sie im Angebot haben. Das klingt großartig! Die neue Waschmaschine ist sehr energieeffizient und hat viele tolle Funktionen. Möchten Sie mehr darüber erfahren? Ich bin eine Bubble nur mit Sender. Ich bin eine Bubble nur mit Zeit. Ich bin eine Bubble ohne Konfiguration. Hier steht ein sehr langer Probetext über zwei beste Freunde, die einen tollen Chat-Verlauf haben.

Chip V3

Checkbox (multi-selection)

Radio (single-selection)

Button

Link

Label Current page

Icons

Image slot

Placeholder image. Placeholder image. Placeholder image.

Over color

Size 200

Placeholder image.

Width behavior

Placeholder image.

Select (dropdown)

Chip V2

Label Label
Label Label
Label Inverted Label!!! Checked Placeholder Label Foo Bar

Cinema

Product 1 Product 2 Product 3 Product 4 Product 5 Product 6 Product 7 Product 1 Product 2 Product 3 Product 4 Product 5 Product 6 Product 7 Product 1 Product 5 Product 1 Product 5 LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG Product LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG Product

Energy Label

Focused Dialog

Placeholder
Abbrechen OK, weiter

Form Group

text field 1 text field 2 text area 1 text area 2 dropdown 1 dropdown 2 checkbox 1 checkbox 2 checkbox 3 radio button 1 radio button 2 radio button 3

Form / Checkbox V1

Default Checked Error Disabled Left Label Placement
Damen374637

Checkbox w/ overflowing text

ich bin ein sehr langes label das nicht in eine zeile passt und deswegen jetzt den rest mit einer ellipsis anzeigt
ich bin ein sehr langes label das nicht in eine zeile passt und deswegen jetzt den rest mit einer ellipsis anzeigt

Form / Checkbox V2

Error
Damen374637

Checkbox w/ overflowing text

ich bin ein sehr langes label das nicht in eine zeile passt und deswegen jetzt den rest mit einer ellipsis anzeigt
ich bin ein sehr langes label das nicht in eine zeile passt und deswegen jetzt den rest mit einer ellipsis anzeigt

Form / Radio Button V1

Default Checked Error Disabled Left Label Placement

Radio w/ overflowing text

ich bin ein sehr langes label das nicht in eine zeile passt und deswegen jetzt den rest mit einer ellipsis anzeigt
ich bin ein sehr langes label das nicht in eine zeile passt und deswegen jetzt den rest mit einer ellipsis anzeigt

Form / Radio Button V2

Error

Radio w/ overflowing text

ich bin ein sehr langes label das nicht in eine zeile passt und deswegen jetzt den rest mit einer ellipsis anzeigt
ich bin ein sehr langes label das nicht in eine zeile passt und deswegen jetzt den rest mit einer ellipsis anzeigt

Form / Text Area

Default Any label Any label Any label Any label

Form / Text Field

Default Any label Any label Any label Any label

Icon

Icon Button

Interactive V2

I act as a link. Search engines will see me as a link.
I act as a masked link. Search engines will not see me as a link.

Interactive V1

I act as a button. Add a click event to see me in action. I act as a link. Search engines will see me as a link. I act as a masked link. Search engines will not see me as a link.

Media Object Card V2

blue checkered background
Headline
Subline
blue checkered background
Headline
Subline
Headline
Subline
blue checkered background
Headline
Subline
blue checkered background
Headline
Subline

Headline
Subline
Headline
Subline
Headline
Subline
Headline
Subline

Headline
Subline
blue checkered background
Headline
Subline
blue checkered background
Headline
Subline
blue checkered background
Headline
Subline
blue checkered background
Headline
Subline

blue checkered background
Headline
Subline
blue checkered background
Headline
Subline
blue checkered background
Headline
Subline

Long headline that gets truncated
blue checkered background Long headline that gets truncated
blue checkered background Long headline that gets truncated
Long headline that gets truncated

Media Object Card V1

blue checkered background
Headline
Subline
blue checkered background
Headline
Subline
Headline
Subline

Headline
Subline
Headline
Subline
Headline
Subline
Headline
Subline

Paper Card

Default
Default Footer
 Background color
Footer
 Size 50 Size 50
Footer
 Background color
Footer
Ausgewählte Sportgeräte und auch für Haushalt und Elektronik und noch mehr Text
nur bis morgen, 23:59 Uhr
Details

Popover



anchor Text within popover

Progress Bar

Promo Card V2

blue checkered background
blue checkered background
sticky background
First Headline Overline Second Headline Text Logo blue checkered background -12% -20% Extra Label First Headline – Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Overline – Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Second Headline – Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Text – Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Logo blue checkered background -12% -20% Extra Label -12% -20% Extra Label -12% -20% Extra Label First Headline Overline Second Headline Text Logo blue checkered background -12% -20% Extra Label

Promo Card V1

blue checkered background
blue checkered background
sticky background
Logo blue checkered background -12% -20% Extra Label Logo blue checkered background -12% -20% Extra Label -12% -20% Extra Label -12% -20% Extra Label -12% -20% Extra Label Logo blue checkered background -12% -20% Extra Label

Row

PLACEHOLDER PLACEHOLDER
Label

Selection Tile V1

Default Default Default Default Default Default Default Container

With selection signifier

Headline
Lorem ipsum dolor sit amet consectetur. Senectus odio pellentesque eget bibendum viverra tincidunt.
Headline
Lorem ipsum dolor sit amet consectetur. Senectus odio pellentesque eget bibendum viverra tincidunt.
Headline
Lorem ipsum dolor sit amet consectetur. Senectus odio pellentesque eget bibendum viverra tincidunt.
Headline
Lorem ipsum dolor sit amet consectetur. Senectus odio pellentesque eget bibendum viverra tincidunt.

Selection Tile V2

With selection signifier

Headline
Lorem ipsum dolor sit amet consectetur. Senectus odio pellentesque eget bibendum viverra tincidunt.
Headline
Lorem ipsum dolor sit amet consectetur. Senectus odio pellentesque eget bibendum viverra tincidunt.
Headline
Lorem ipsum dolor sit amet consectetur. Senectus odio pellentesque eget bibendum viverra tincidunt.
Headline
Lorem ipsum dolor sit amet consectetur. Senectus odio pellentesque eget bibendum viverra tincidunt.

Snackbar

Open snackbar

Sheet

PLACEHOLDER Open sheet

Skeleton

Switch

V2

Default Checked Size 50 Size 50 checked Disabled Label left

V3

Tag

Default Size 50 Size 25 Info Primary Info-Secondary Hint Error Sale Sold-Out Success Warning

Expander

Custom expand text Custom collapse text

Tab Bar

Panel 1

This is the content for the first tab.

Panel 2

This is the content for the second tab.

Panel 3

This is the content for the third tab.

Horizontal Icons


Vertical Icons

Toggle Tip



Text with a toggle tip This is the toggle tip! Text with a toggle tip Position top! Text with a toggle tip Position bottom!

Tooltip V2



Quick Navigation

Show All Components

Font Size Controls

A- A A+
Current font size: