| Name | Hex |
|---|---|
beachy-000 | #ffffff |
beachy-025 | #faf8f5 |
beachy-050 | #f1eee6 |
beachy-100 | #e8e2d8 |
beachy-150 | #dcd3c7 |
beachy-200 | #cec5b9 |
beachy-250 | #c2b7ab |
beachy-300 | #b7a89a |
beachy-350 | #aa9b8e |
beachy-400 | #9d8e81 |
beachy-450 | #908174 |
beachy-500 | #827467 |
beachy-550 | #75685b |
beachy-600 | #695c50 |
beachy-650 | #5d5043 |
beachy-700 | #514438 |
beachy-750 | #45392d |
beachy-800 | #3a2e23 |
beachy-850 | #2f2318 |
beachy-900 | #23190f |
beachy-950 | #1a0e01 |
beachy-999 | #000000 |
blue-000 | #ffffff |
blue-025 | #f5f8fb |
blue-050 | #ebf2f7 |
blue-100 | #d6e5f3 |
blue-150 | #c4d7e9 |
blue-200 | #afcae3 |
blue-250 | #99bedd |
blue-300 | #88b0d5 |
blue-350 | #74a4cd |
blue-400 | #6497c2 |
blue-450 | #538ab7 |
blue-500 | #427baa |
blue-500-alpha-10 | #427baa1a |
blue-500-alpha-20 | #427baa33 |
blue-500-alpha-30 | #427baa4d |
blue-500-alpha-40 | #427baa66 |
blue-500-alpha-50 | #427baa80 |
blue-500-alpha-60 | #3d77a599 |
blue-550 | #3370a1 |
blue-600 | #286491 |
blue-650 | #215782 |
blue-700 | #1c4b70 |
blue-750 | #173f5d |
blue-800 | #13334d |
blue-850 | #0f283c |
blue-900 | #0b1d2c |
blue-950 | #04131e |
blue-999 | #000000 |
green-000 | #ffffff |
green-025 | #effce6 |
green-050 | #ddf9cc |
green-100 | #c4eeac |
green-150 | #b0e28f |
green-200 | #9ed579 |
green-250 | #89c95e |
green-300 | #7abc4d |
green-350 | #71b140 |
green-400 | #5ea12a |
green-450 | #54931b |
green-500 | #4a8509 |
green-550 | #3a7906 |
green-600 | #2d6c04 |
green-650 | #2e5d01 |
green-700 | #285003 |
green-750 | #24430b |
green-800 | #1c3704 |
green-850 | #152b08 |
green-900 | #111f08 |
green-950 | #061400 |
green-999 | #000000 |
neutral-000 | #ffffff |
neutral-000-alpha-0 | #ffffff00 |
neutral-000-alpha-10 | #ffffff1a |
neutral-000-alpha-20 | #ffffff33 |
neutral-000-alpha-30 | #ffffff4d |
neutral-000-alpha-40 | #ffffff66 |
neutral-000-alpha-50 | #ffffff80 |
neutral-000-alpha-60 | #ffffff99 |
neutral-025 | #f9f7f7 |
neutral-050 | #f3f0f0 |
neutral-100 | #e5e2e2 |
neutral-150 | #d6d4d4 |
neutral-200 | #c8c6c6 |
neutral-250 | #bbb8b8 |
neutral-300 | #adaaaa |
neutral-350 | #9f9d9d |
neutral-400 | #929090 |
neutral-450 | #878383 |
neutral-500 | #797575 |
neutral-550 | #6d6a6a |
neutral-600 | #615d5d |
neutral-650 | #545252 |
neutral-700 | #494646 |
neutral-750 | #3d3b3b |
neutral-800 | #323030 |
neutral-850 | #272525 |
neutral-900 | #1b1b1b |
neutral-950 | #131010 |
neutral-999 | #000000 |
neutral-999-alpha-0 | #00000000 |
neutral-999-alpha-05 | #0000000d |
neutral-999-alpha-10 | #0000001a |
neutral-999-alpha-20 | #00000033 |
neutral-999-alpha-30 | #0000004d |
neutral-999-alpha-40 | #00000066 |
neutral-999-alpha-50 | #00000080 |
red-000 | #ffffff |
red-025 | #fef5fb |
red-050 | #ffebf9 |
red-100 | #fed7f0 |
red-150 | #fec3e4 |
red-200 | #fbb0d7 |
red-250 | #fb9acb |
red-300 | #fd81be |
red-350 | #fc66b1 |
red-400 | #fb46a2 |
red-450 | #f12994 |
red-500 | #e20686 |
red-550 | #cb027d |
red-600 | #b4076c |
red-650 | #9c105e |
red-700 | #870f50 |
red-750 | #710f47 |
red-800 | #5d0d3a |
red-850 | #4a0b2d |
red-900 | #380722 |
red-950 | #230616 |
red-999 | #000000 |
| Name | Light theme | Dark Theme | ||
|---|---|---|---|---|
action-base-fg-default | blue-550 | #3370a1 | neutral-000 | #ffffff |
action-base-fg-interact | blue-650 | #215782 | neutral-000 | #ffffff |
action-base-stroke-default | neutral-999-alpha-20 | #00000033 | neutral-000-alpha-40 | #ffffff66 |
action-base-stroke-interact | blue-500 | #427baa | neutral-000 | #ffffff |
action-base-stroke-selected | blue-600 | #286491 | neutral-000 | #ffffff |
action-cta-bg-default | blue-500 | #427baa | neutral-000 | #ffffff |
action-cta-bg-interact | blue-600 | #286491 | blue-100 | #d6e5f3 |
action-cta-bg-selected | blue-700 | #1c4b70 | blue-200 | #afcae3 |
action-cta-fg-default | neutral-000 | #ffffff | blue-550 | #3370a1 |
action-cta-fg-interact | neutral-000 | #ffffff | blue-650 | #215782 |
action-cta-fg-selected | neutral-000 | #ffffff | blue-750 | #173f5d |
action-cta-stroke-default | blue-500 | #427baa | neutral-000 | #ffffff |
action-ghost-bg-default | neutral-000-alpha-0 | #ffffff00 | neutral-000-alpha-0 | #ffffff00 |
action-ghost-bg-interact | blue-500-alpha-20 | #427baa33 | neutral-999-alpha-20 | #00000033 |
action-ghost-bg-selected | blue-500-alpha-40 | #427baa66 | neutral-999-alpha-40 | #00000066 |
action-ghost-fg-default | blue-550 | #3370a1 | neutral-000 | #ffffff |
action-ghost-fg-interact | blue-650 | #215782 | neutral-000 | #ffffff |
action-ghost-fg-selected | blue-750 | #173f5d | blue-000 | #ffffff |
action-ghost-stroke-default | blue-500 | #427baa | neutral-000 | #ffffff |
content-base-artwork-dim | neutral-200 | #c8c6c6 | neutral-000-alpha-40 | #ffffff66 |
content-base-bg-default | neutral-000 | #ffffff | neutral-999 | #000000 |
content-base-bg-default-alpha | neutral-000-alpha-0 | #ffffff00 | neutral-999-alpha-0 | #00000000 |
content-base-bg-brand-beachy | beachy-050 | #f1eee6 | beachy-500 | #827467 |
content-base-bg-brand-default | neutral-000 | #ffffff | blue-500 | #427baa |
content-base-bg-brand-tone | blue-050 | #ebf2f7 | blue-700 | #1c4b70 |
content-base-fg-brand | blue-500 | #427baa | neutral-000 | #ffffff |
content-base-fg-default | neutral-800 | #323030 | neutral-000 | #ffffff |
content-base-fg-dim | neutral-500 | #797575 | neutral-000 | #ffffff |
content-base-stroke-default | neutral-200 | #c8c6c6 | neutral-000-alpha-40 | #ffffff66 |
content-base-stroke-brand-default | blue-500 | #427baa | neutral-000 | #ffffff |
content-base-stroke-brand-hue | blue-300 | #88b0d5 | blue-300 | #88b0d5 |
content-base-stroke-brand-subtle | blue-150 | #c4d7e9 | blue-700 | #1c4b70 |
data-accent-bg-default | blue-500 | #427baa | neutral-000 | #ffffff |
data-accent-fg-default | neutral-000 | #ffffff | blue-500 | #427baa |
data-accent-stroke-default | blue-300 | #88b0d5 | blue-300 | #88b0d5 |
data-base-bg-default | neutral-000 | #ffffff | blue-500 | #427baa |
data-base-bg-interact | blue-500-alpha-10 | #427baa1a | neutral-999-alpha-10 | #0000001a |
data-base-bg-striped | neutral-999-alpha-05 | #0000000d | neutral-000-alpha-10 | #ffffff1a |
data-base-fg-default | neutral-800 | #323030 | neutral-000 | #ffffff |
data-base-stroke-default | neutral-999-alpha-20 | #00000033 | neutral-000-alpha-40 | #ffffff66 |
input-base-artwork-default | blue-500 | #427baa | blue-500 | #427baa |
input-base-artwork-selected | neutral-000 | #ffffff | neutral-000 | #ffffff |
input-base-artwork-unselected | neutral-200 | #c8c6c6 | neutral-200 | #c8c6c6 |
input-base-bg-default | neutral-000 | #ffffff | neutral-000 | #ffffff |
input-base-bg-interact | blue-050 | #ebf2f7 | blue-050 | #ebf2f7 |
input-base-bg-readonly | neutral-999-alpha-05 | #0000000d | neutral-000-alpha-60 | #ffffff99 |
input-base-bg-selected | blue-500 | #427baa | blue-500 | #427baa |
input-base-bg-selected-interact | blue-600 | #286491 | blue-600 | #286491 |
input-base-fg-hint | neutral-500 | #797575 | neutral-000 | #ffffff |
input-base-fg-inputtext | neutral-800 | #323030 | neutral-800 | #323030 |
input-base-fg-label | neutral-800 | #323030 | neutral-000 | #ffffff |
input-base-stroke-default | neutral-450 | #878383 | neutral-000 | #ffffff |
input-base-stroke-error | red-450 | #f12994 | red-450 | #f12994 |
navigation-primary-bg-active | blue-050 | #ebf2f7 | neutral-999-alpha-10 | #0000001a |
navigation-primary-bg-active-interact | blue-150 | #c4d7e9 | neutral-999-alpha-40 | #00000066 |
navigation-primary-bg-default | neutral-000-alpha-0 | #ffffff00 | neutral-000-alpha-0 | #ffffff00 |
navigation-primary-bg-interact | blue-050 | #ebf2f7 | neutral-999-alpha-10 | #0000001a |
navigation-primary-bg-selected | blue-050 | #ebf2f7 | neutral-999-alpha-10 | #0000001a |
navigation-primary-bg-selected-interact | blue-150 | #c4d7e9 | neutral-999-alpha-40 | #00000066 |
navigation-primary-fg-active | blue-600 | #286491 | neutral-000 | #ffffff |
navigation-primary-fg-default | blue-500 | #427baa | neutral-000 | #ffffff |
navigation-primary-fg-interact | blue-600 | #286491 | neutral-000 | #ffffff |
navigation-primary-fg-selected | blue-700 | #1c4b70 | neutral-000 | #ffffff |
navigation-secondary-bg-default | neutral-000-alpha-0 | #ffffff00 | neutral-000-alpha-0 | #ffffff00 |
navigation-secondary-bg-interact | blue-050 | #ebf2f7 | neutral-999-alpha-10 | #0000001a |
navigation-secondary-bg-selected | blue-050 | #ebf2f7 | neutral-999-alpha-10 | #0000001a |
navigation-secondary-bg-selected-interact | blue-150 | #c4d7e9 | neutral-999-alpha-40 | #00000066 |
navigation-secondary-fg-default | blue-500 | #427baa | neutral-000 | #ffffff |
navigation-secondary-fg-interact | blue-600 | #286491 | neutral-000 | #ffffff |
navigation-secondary-fg-selected | blue-700 | #1c4b70 | neutral-000 | #ffffff |
navigation-secondary-stroke-default | neutral-999-alpha-40 | #00000066 | neutral-000-alpha-40 | #ffffff66 |
navigation-tab-bg-default | neutral-000-alpha-0 | #ffffff00 | neutral-000-alpha-0 | #ffffff00 |
navigation-tab-bg-interact | blue-500-alpha-40 | #427baa66 | neutral-000-alpha-40 | #ffffff66 |
navigation-tab-bg-selected | blue-500 | #427baa | neutral-000 | #ffffff |
navigation-tab-bg-selected-interact | blue-600 | #286491 | blue-100 | #d6e5f3 |
navigation-tab-fg-default | blue-550 | #3370a1 | neutral-000 | #ffffff |
navigation-tab-fg-interact | blue-650 | #215782 | neutral-000 | #ffffff |
navigation-tab-fg-selected | blue-750 | #173f5d | neutral-000 | #ffffff |
status-accent-artwork-success | green-450 | #54931b | green-450 | #54931b |
status-accent-bg-default | neutral-500 | #797575 | neutral-500 | #797575 |
status-accent-bg-error | red-500 | #e20686 | red-500 | #e20686 |
status-accent-bg-highlight | red-500 | #e20686 | red-500 | #e20686 |
status-accent-bg-info | blue-500 | #427baa | blue-500 | #427baa |
status-accent-bg-success | green-500 | #4a8509 | green-500 | #4a8509 |
status-accent-fg-default | neutral-000 | #ffffff | neutral-000 | #ffffff |
status-accent-stroke-default | neutral-000-alpha-40 | #ffffff66 | neutral-000-alpha-40 | #ffffff66 |
status-base-artwork-default | neutral-450 | #878383 | neutral-000 | #ffffff |
status-base-artwork-error | red-450 | #f12994 | neutral-000 | #ffffff |
status-base-artwork-info | blue-500 | #427baa | neutral-000 | #ffffff |
status-base-artwork-success | green-450 | #54931b | neutral-000 | #ffffff |
status-base-bg-default | neutral-050 | #f3f0f0 | neutral-050 | #f3f0f0 |
status-base-bg-error | red-050 | #ffebf9 | red-050 | #ffebf9 |
status-base-bg-info | blue-050 | #ebf2f7 | blue-050 | #ebf2f7 |
status-base-bg-success | green-050 | #ddf9cc | green-050 | #ddf9cc |
status-base-fg-default | neutral-800 | #323030 | neutral-800 | #323030 |
status-base-fg-error | red-550 | #cb027d | red-550 | #cb027d |
status-base-fg-info | blue-550 | #3370a1 | blue-550 | #3370a1 |
status-base-fg-success | green-550 | #3a7906 | green-550 | #3a7906 |
status-base-stroke-default | neutral-400 | #929090 | neutral-400 | #929090 |
status-base-stroke-error | red-400 | #fb46a2 | red-400 | #fb46a2 |
status-base-stroke-info | blue-400 | #6497c2 | blue-400 | #6497c2 |
status-base-stroke-success | green-400 | #5ea12a | green-400 | #5ea12a |
Webfonts
Lato 400
Lato 400 italic
Lato 700
Lato 900
Line Heights
Dense
Line Height dense. 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.
Default
Line Height default. 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.
Font Scales
Font Scale xs
Font Scale sm
Font Scale base
Font Scale md
Font Scale lg
Font Scale xl
Font Scale 2xl
Font Scale 3xl
Font Scale 4xl
Font Scale 5xl
Font Scale 6xl
Font Scale 7xl
Font Scale 8xl
Font Scale 9xl
Font Scale 10xl
Font Scale 11xl
Font Scale 12xl
Normal Spacing
4xs
3xs
2xs
xs
sm
base
md
lg
xl
2xl
3xl
4xl
5xl
6xl
Fluid Spacing
fluid-xl
fluid-2xl
fluid-3xl
fluid-4xl
fluid-5xl
fluid-6xl
none
4xs
3xs
2xs
xs
sm
base
round
Das ist ein default Container
Breakpoint:
Das ist ein 10er Container
Das ist ein 8er Container
Das ist ein 6er Container
Das ist eine Heading Level 1
Das ist eine Heading Level 2
Das ist eine Heading Level 3
Das ist eine Heading Level 4
Das ist eine Heading Level 5
Das ist eine Heading Level 6
Das ist eine Subheading
Das ist eine Sectionheading Level 2
Das ist eine Heading Level 1
Das ist eine Heading Level 2
Das ist eine Heading Level 3
Das ist eine Heading Level 4
Das ist eine Heading Level 5
Das ist eine Heading Level 6
Das ist eine Subheading
Das ist eine Sectionheading Level 2
Das ist ein normaler Textabsatz. 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.
Das ist ein small Textabsatz. 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.
Das ist ein large Textabsatz. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Das ist ein strong Textabsatz. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Das ist ein italic Textabsatz. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum. Es folgt ein normaler InlineLink ohne Icon mit viel Text, damit es über zwei Zeilen läuft zur unbestimmten Verlinkung
Es folgt ein um Interaktionen auszuführen.
Es folgt ein interner InlineLink mit einem langen Text und Zeilenumbruch zum verlinken auf eine interne Seite auf SM Text
Es folgt ein interner InlineLink mit einem langen Text und Zeilenumbruch zum verlinken auf eine interne Seite auf LG Text
Dieser Text ist durch em hervorgehoben
Dieser Text ist durch strong hervorgehoben
Das u Element is unterstrichener Text
Dieser Text ist als gelöscht markiert
Dieser Text ist durchgestrichen
Das folgende Zeichen ist hochgestellt: ®
Beispiel für das Zeichen H2O
Dieser Text ist als small markiert
Beispiel einer Abkürzung: HTML
Das Markierungselement gibt ein Highlight an
Das ist ein normaler Textabsatz. 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.
Das ist ein small Textabsatz. 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.
Das ist ein large Textabsatz. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Das ist ein strong Textabsatz. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Das ist ein italic Textabsatz. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum. Es folgt ein normaler InlineLink ohne Icon mit viel Text, damit es über zwei Zeilen läuft zur unbestimmten Verlinkung
Es folgt ein um Interaktionen auszuführen.
Es folgt ein interner InlineLink mit einem langen Text und Zeilenumbruch zum verlinken auf eine interne Seite auf SM Text
Es folgt ein interner InlineLink mit einem langen Text und Zeilenumbruch zum verlinken auf eine interne Seite auf LG Text
Dieser Text ist durch em hervorgehoben
Dieser Text ist durch strong hervorgehoben
Das u Element is unterstrichener Text
Dieser Text ist als gelöscht markiert
Dieser Text ist durchgestrichen
Das folgende Zeichen ist hochgestellt: ®
Beispiel für das Zeichen H2O
Dieser Text ist als small markiert
Beispiel einer Abkürzung: HTML
Das Markierungselement gibt ein Highlight an
- Link standalone
- Interner Icon Link automatisch erkannt
- Section Icon Link automatisch erkannt
- Externer icon Link automatisch erkannt
- Download Link automatisch erkannt
- E-Mail Link automatisch erkannt
- Telefon Link automatisch erkannt
Es folgt ein Link im p-tag Icon Link
- expliziter interner Link mit einem langen Text und Zeilenumbruch. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.
- expliziter Section Link
- expliziter externer Link
- expliziter download Link
- expliziter E-Mail Link
- expliziter Telefon Link
- expliziter Back Link
- expliziter Fax Link
- SVG Icon Link
- SVG Icon Link. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.
SVG Icon ohne Text in h-stack
SVG Icon only- Icon Link. Icon Rechts
- Durch Strong hervorgehobener interner Icon Link automatisch erkannt
- Large interner Icon Link automatisch erkannt
Style Icon ohne Text
Auto Icon only- Link standalone
- Interner Icon Link automatisch erkannt
- Section Icon Link automatisch erkannt
- Externer icon Link automatisch erkannt
- Download Link automatisch erkannt
- E-Mail Link automatisch erkannt
- Telefon Link automatisch erkannt
Es folgt ein Link im p-tag Icon Link
- expliziter interner Link mit einem langen Text und Zeilenumbruch. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.
- expliziter Section Link
- expliziter externer Link
- expliziter download Link
- expliziter E-Mail Link
- expliziter Telefon Link
- expliziter Back Link
- expliziter Fax Link
- SVG Icon Link
- SVG Icon Link. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.
SVG Icon ohne Text in h-stack
SVG Icon only- Icon Link. Icon Rechts
- Durch Strong hervorgehobener interner Icon Link automatisch erkannt
- Large interner Icon Link automatisch erkannt
Style Icon ohne Text
Auto Icon only- Das ist ein Link im Buttonstyle
Es folgt ein Button im p-tag Link Button
- Button autoIcon interner Link automatisch erkannt
- Button autoIcon section Link automatisch erkannt
- Button autoIcon Externer Link automatisch erkannt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.
- Button autoIcon Download Link automatisch erkannt
- Button autoIcon E-Mail Link automatisch erkannt
- Button autoIcon Telefon Link automatisch erkannt
- expliziter Section Icon Button
- expliziter Back Icon Button
- Button autoIcon, Icon Rechts
- Secondary Button autoIcon interner Link automatisch erkannt
- Tertiary Button autoIcon interner Link automatisch erkannt
- Das ist ein Link im Buttonstyle
Es folgt ein Button im p-tag Link Button
- Button autoIcon interner Link automatisch erkannt
- Button autoIcon section Link automatisch erkannt
- Button autoIcon Externer Link automatisch erkannt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.
- Button autoIcon Download Link automatisch erkannt
- Button autoIcon E-Mail Link automatisch erkannt
- Button autoIcon Telefon Link automatisch erkannt
- expliziter Section Icon Button
- expliziter Back Icon Button
- Button autoIcon, Icon Rechts
- Secondary Button autoIcon interner Link automatisch erkannt
- Tertiary Button autoIcon interner Link automatisch erkannt
- Das ist ein Link im Tagstyle
Es folgt ein Tag im p-tag Link Tag
- Das ist ein Link im Tagstyle
Es folgt ein Tag im p-tag Link Tag
Default
Accent
Font Scales
Inline
Paragraph with inline Icon
h-stack
Inside h-stack with Heading. The alignment is centered.
Inside h-stack with small Paragraph
Default
Accent
Font Scales
Inline
Paragraph with inline Icon
h-stack
Inside h-stack with Heading. The alignment is centered.
Inside h-stack with small Paragraph
- Style Info IconText mit einem langen Text und Zeilenumbruch. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.
- Style check IconText
- Style unchecked IconText
- SVG IconText
- SVG IconText. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.
- Style Info IconText mit einem langen Text und Zeilenumbruch. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.
- Style check IconText
- Style unchecked IconText
- SVG IconText
- SVG IconText. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.
- Das ist eine ungeordnete simple Liste
- Das ist eine ungeordnete Liste mit einem sehr langen Eintrag. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.
- Das ist ein styleItem Item
- Das ist check item
- Das ist eine ungeordnete simple Multicolumn Liste
- Das ist eine ungeordnete lines Liste mit Check Icon
- Das ist eine ungeordnete Liste mit einem sehr langen Eintrag. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.
- Das ist eine ungeordnete simple inline Liste
- Zweites Element
- Drittes Element
- Viertes Element einem sehr langen Eintrag. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.
- Das ist eine ungeordnete simple lines Liste
- Zweites Element
- Drittes Element
- Viertes Element einem sehr langen Eintrag. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.
- Das ist eine ungeordnete simple inset lines Liste
- Zweites Element
- Drittes Element
- Viertes Element einem sehr langen Eintrag. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.
- Das ist eine ungeordnete multicolumn Bullet Liste
- Das ist eine ungeordnete Liste mit einer untergeordneten Liste. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.
- Das ist eine ungeordnete Sub-Liste
- Das ist eine ungeordnete Sub-Liste mit einem sehr langen Eintrag. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.
- Das ist eine ungeordnete Liste mit einem sehr langen Eintrag
- Das ist eine ungeordnete Bullet Liste
- Das ist eine ungeordnete Liste mit einer untergeordneten Liste. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.
- Das ist eine ungeordnete Sub-Liste
- Das ist eine ungeordnete Sub-Liste mit einem sehr langen Eintrag. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.
- Das ist eine ungeordnete Liste mit einem sehr langen Eintrag
- Das ist eine geordnete Liste
- Das ist eine geordnete Liste mit einer untergeordneten Liste
- Das ist eine geordnete Sub-Liste
- Das ist eine geordnete Sub-Liste mit einem sehr langen Eintrag. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.
- Das ist eine geordnete Liste mit einem sehr langen Eintrag. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.
- Das ist eine geordnete Liste mit einem sehr langen Eintrag
- Das ist eine geordnete Liste mit einem sehr langen Eintrag
- Das ist eine geordnete Liste mit einem sehr langen Eintrag
- Das ist eine geordnete Liste mit einem sehr langen Eintrag
- Das ist eine geordnete Liste mit einem sehr langen Eintrag
- Das ist eine geordnete Liste mit einem sehr langen Eintrag
- Das ist eine geordnete Liste mit einem sehr langen Eintrag
- Das ist eine geordnete Liste mit einem sehr langen Eintrag
- Das ist eine geordnete Liste mit einem sehr langen Eintrag
- Description List Term
- Description List Details
- A very long Description List Term
- A very long Description list details text
- dl
- dd suffix
- Inset Description List Term
- Inset Description List Details
- A very long Description List Term
- A very long Description list details text
- dl
- dd
- Calculation List term
- Details
- Sonderausstattung
- 485 €
- Gesamtpreis Result Modifier
- 21.585 €
- Das ist eine ungeordnete simple Liste
- Das ist eine ungeordnete Liste mit einem sehr langen Eintrag. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.
- Das ist ein styleItem Item
- Das ist check item
- Das ist eine ungeordnete simple Multicolumn Liste
- Das ist eine ungeordnete lines Liste mit Check Icon
- Das ist eine ungeordnete Liste mit einem sehr langen Eintrag. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.
- Das ist eine ungeordnete simple inline Liste
- Zweites Element
- Drittes Element
- Viertes Element einem sehr langen Eintrag. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.
- Das ist eine ungeordnete simple lines Liste
- Zweites Element
- Drittes Element
- Viertes Element einem sehr langen Eintrag. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.
- Das ist eine ungeordnete simple inset lines Liste
- Zweites Element
- Drittes Element
- Viertes Element einem sehr langen Eintrag. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.
- Das ist eine ungeordnete multicolumn Bullet Liste
- Das ist eine ungeordnete Liste mit einer untergeordneten Liste. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.
- Das ist eine ungeordnete Sub-Liste
- Das ist eine ungeordnete Sub-Liste mit einem sehr langen Eintrag. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.
- Das ist eine ungeordnete Liste mit einem sehr langen Eintrag
- Das ist eine ungeordnete Bullet Liste
- Das ist eine ungeordnete Liste mit einer untergeordneten Liste. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.
- Das ist eine ungeordnete Sub-Liste
- Das ist eine ungeordnete Sub-Liste mit einem sehr langen Eintrag. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.
- Das ist eine ungeordnete Liste mit einem sehr langen Eintrag
- Das ist eine geordnete Liste
- Das ist eine geordnete Liste mit einer untergeordneten Liste
- Das ist eine geordnete Sub-Liste
- Das ist eine geordnete Sub-Liste mit einem sehr langen Eintrag. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.
- Das ist eine geordnete Liste mit einem sehr langen Eintrag. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.
- Das ist eine geordnete Liste mit einem sehr langen Eintrag
- Das ist eine geordnete Liste mit einem sehr langen Eintrag
- Das ist eine geordnete Liste mit einem sehr langen Eintrag
- Das ist eine geordnete Liste mit einem sehr langen Eintrag
- Das ist eine geordnete Liste mit einem sehr langen Eintrag
- Das ist eine geordnete Liste mit einem sehr langen Eintrag
- Das ist eine geordnete Liste mit einem sehr langen Eintrag
- Das ist eine geordnete Liste mit einem sehr langen Eintrag
- Das ist eine geordnete Liste mit einem sehr langen Eintrag
- Description List Term
- Description List Details
- A very long Description List Term
- A very long Description list details text
- dl
- dd suffix
- Inset Description List Term
- Inset Description List Details
- A very long Description List Term
- A very long Description list details text
- dl
- dd
- Calculation List term
- Details
- Sonderausstattung
- 485 €
- Gesamtpreis Result Modifier
- 21.585 €
Default
| Id | Vorname | Nachname | Alter |
|---|---|---|---|
| 1 | Max | Mustermann | 30 |
| 2 | Maxi | Musterfrau | 31 |
| 3 | Klaus | Tester | 28 |
Striped
| Id | Vorname | Nachname | Alter |
|---|---|---|---|
| 1 | Max | Mustermann | 30 |
| 2 | Maxi | Musterfrau | 31 |
| 3 | Klaus | Tester | 28 |
Default
| Id | Vorname | Nachname | Alter |
|---|---|---|---|
| 1 | Max | Mustermann | 30 |
| 2 | Maxi | Musterfrau | 31 |
| 3 | Klaus | Tester | 28 |
Striped
| Id | Vorname | Nachname | Alter |
|---|---|---|---|
| 1 | Max | Mustermann | 30 |
| 2 | Maxi | Musterfrau | 31 |
| 3 | Klaus | Tester | 28 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
- DateititelPDF, 1 MB
Beschreibungstext (optional) mit einem langen Beschreibungstext. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.
- DateititelPDF, 1 MB
Beschreibungstext. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.
- DateititelPDF, 1 MB
- DateititelPDF, 1 MB
Beschreibungstext (optional) mit einem langen Beschreibungstext. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.
- DateititelPDF, 1 MB
Beschreibungstext. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.
- DateititelPDF, 1 MB
Small
Default
Info
Success
Error
Highlight
Medium
Default
Info
Success
Error
Highlight
Large
Default
Info
Success
Error
Highlight
Note
1
22
333
Small
Default
Info
Success
Error
Highlight
Medium
Default
Info
Success
Error
Highlight
Large
Default
Info
Success
Error
Highlight
Note
1
22
333
Details Summary
Details Panel. 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.
Details Summary default open
Details Panel. 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.
Details Summary
Details Panel. 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.
Details Summary default open
Details Panel. 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.
Accordion Element. 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.
Accordion Element. 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.
Accordion Element. 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.
Accordion Element. 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.
Erstes Details/Summary Accordion Element
Accordion Element. 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.
Zweites Details/summary Accordion Element mit einer langen Summary Headline, damit der Text zweizeilig ist.
Accordion Element. 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.
Accordion Element. 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.
Accordion Element. 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.
Accordion Element. 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.
Accordion Element. 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.
Erstes Details/Summary Accordion Element
Accordion Element. 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.
Zweites Details/summary Accordion Element mit einer langen Summary Headline, damit der Text zweizeilig ist.
Accordion Element. 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.
Tabs Element light-1 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.
Tabs Element dark-1 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.
- Das ist ein Tooltip vom Button aus dem Theme light
- Interner Icon Link mit TooltipDas ist ein Tooltip vom Link aus dem Theme light
- Das ist ein Tooltip vom Button aus dem Theme dark
- Interner Icon Link mit TooltipDas ist ein Tooltip vom Link aus dem Theme dark
- Loading
- Loading
- Loading
- Loading
- Loading
- Loading
Erstes Masonry Element
Zweites Masonry Element mit einer langen Summary Headline, damit der Text zweizeilig ist.
Drittes Masonry Element mit einer langen Summary Headline, damit der Text zweizeilig ist.
Viertes Masonry Element.
Fünftes Masonry Element
Sechstes Masonry Element
Siebtes Masonry Element mit einer langen Summary Headline, damit der Text zweizeilig ist.
Achtes Masonry Element