Skip to content Skip to footer Show sitemap

Colors Shadows Typography Bodytext Icons Grid Spacing Buttons Text link Slider controls Control icons Tooltips Header Simple links Breadcrumbs Form Cards Link Panel Chip

Colors

Primary

primary-100

primary-200

primary-300

primary-400

primary-500

primary-600

primary-700

primary-800

primary-900

Neutral

neutral-100

neutral-200

neutral-300

neutral-400

neutral-500

neutral-600

neutral-700

neutral-800

neutral-900

UI

ui-white

ui-black

ui-error

ui-error-bg

ui-warning

ui-warning-bg

ui-success

ui-success-bg

Other

background

text

text-inverted

line

focus

Gradients

ui-backdrop-gradient

Theme default

accent

accent-dark

text

text-inverted

bodytext

background

line

focus

backdrop

link

link-hover

Theme medium

accent

accent-dark

text

text-inverted

bodytext

background

line

focus

backdrop

link

link-hover

Theme dark

accent

accent-dark

text

text-inverted

bodytext

background

line

focus

backdrop

link

link-hover

Theme primary

accent

accent-dark

text

text-inverted

bodytext

background

line

focus

backdrop

link

link-hover

Shadows, Backdrops, Gradients, etc.

Backdrops

default

primary

gradient-bottom

default

primary

gradient-bottom

default

primary

gradient-bottom

default

primary

gradient-bottom

default

primary

gradient-bottom

Typography

Hero Display .fst--hero-display

Create nice
systems.

Headline 1 .fst--h1

Create nice and
flexible systems.

Headline 2 .fst--h2

Create nice and flexible
design systems.

Headline 3 .fst--h3

Create nice and flexible design
systems for selling.

Headline 4 .fst--h4

Create nice and flexible design systems for
selling anything you want.

Headline 5 .fst--h5

Create nice and flexible design systems for selling
anything you want.

Bodytext Large .fst--body-l

Create nice and flexible design systems for selling anything you want. Our products are flexible, sustainably and simple to handle. Discover our highlights here and now.

Bodytext .fst--body

Create nice and flexible design systems for selling anything you want. Our products are flexible, sustainably and simple to handle. Discover our highlights here and now.

Bodytext Small .fst--body-s

Create nice and flexible design systems for selling anything you want. Our products are flexible, sustainably and simple to handle. Discover our highlights here and now.

Caption .fst--caption

Start shopping

Bodytext

To apply these styles, set a class bodytext to the surrounding container.

Headline 2

Lorem ipsum dolor sit amet consectetur adipiscing elit eleifend, ultricies tempus rhoncus bibendum viverra magnis aptent ligula, platea donec aliquet sociis maecenas enim posuere.

Lorem Link starts here
but has a break ipsum dolor.

Lorem ipsum dolor sit amet consectetur adipiscing elit eleifend, ultricies tempus rhoncus bibendum viverra magnis aptent ligula, platea donec aliquet sociis maecenas enim posuere.
Lorem ipsum dolor sit amet
consectetur adipiscing elit eleifend

Headline 3

Lorem ipsum dolor sit amet consectetur adipiscing elit eleifend, ultricies tempus rhoncus bibendum viverra magnis aptent ligula, platea donec aliquet sociis maecenas enim posuere.

Lorem ipsum dolor sit amet consectetur adipiscing elit eleifend
Lorem ipsum dolor sit amet consectetur adipiscing elit eleifend, ultricies tempus rhoncus bibendum viverra magnis aptent ligula, platea donec aliquet sociis maecenas enim posuere.
Lorem ipsum dolor sit amet
consectetur adipiscing elit eleifend

Tellus hendrerit conubia donec etiam volutpat habitasse nec aptent fames eu dictumst, nunc vitae velit dictum libero eleifend mauris cum risus fusce lacinia urna, mi convallis non egestas euismod netus consequat aenean magnis parturient. Mollis ultrices commodo cubilia libero magna phasellus vulputate at posuere porttitor per faucibus orci diam semper fames, accumsan eleifend aliquet integer taciti fringilla ultricies.

To apply these styles, set a class bodytext to the surrounding container.

Headline 2

Lorem ipsum dolor sit amet consectetur adipiscing elit eleifend, ultricies tempus rhoncus bibendum viverra magnis aptent ligula, platea donec aliquet sociis maecenas enim posuere.

Lorem Link starts here
but has a break ipsum dolor.

Lorem ipsum dolor sit amet consectetur adipiscing elit eleifend, ultricies tempus rhoncus bibendum viverra magnis aptent ligula, platea donec aliquet sociis maecenas enim posuere.
Lorem ipsum dolor sit amet
consectetur adipiscing elit eleifend

Headline 3

Lorem ipsum dolor sit amet consectetur adipiscing elit eleifend, ultricies tempus rhoncus bibendum viverra magnis aptent ligula, platea donec aliquet sociis maecenas enim posuere.

Lorem ipsum dolor sit amet consectetur adipiscing elit eleifend
Lorem ipsum dolor sit amet consectetur adipiscing elit eleifend, ultricies tempus rhoncus bibendum viverra magnis aptent ligula, platea donec aliquet sociis maecenas enim posuere.
Lorem ipsum dolor sit amet
consectetur adipiscing elit eleifend

Icons

global

Grid

Bootstrap grid

Grid layout `.grid-layout`

Spacing (works only in dev mode)

In production build unused classes get stripped - so this only works on local development settings.

Absolute spacings

025 .pl-025

05 .pl-05

1 .pl-1

1-5 .pl-1-5

2 .pl-2

3 .pl-3

4 .pl-4

5 .pl-5

6 .pl-6

7 .pl-7

8 .pl-8

9 .pl-9

10 .pl-10

Buttons

Buttons as `<a>`

This is a link
This is a link

Buttons as `<button>`

Medium theme

Buttons Block

This is a link This is a link

Text link

as `<a>`

This is a link

as `<button>`

Slider controls

Medium

Disabled

Other icons

Medium

Disabled

Other icons

Medium

Disabled

Other icons

Medium

Disabled

Other icons

Medium

Disabled

Other icons

Control icons

Default as `<a>`

Disabled as `<a>`

Default as `<button>`

Disabled as `<button>`

Default as `<a>`

Disabled as `<a>`

Default as `<button>`

Disabled as `<button>`

Default as `<a>`

Disabled as `<a>`

Default as `<button>`

Disabled as `<button>`

Default as `<a>`

Disabled as `<a>`

Default as `<button>`

Disabled as `<button>`

Default as `<a>`

Disabled as `<a>`

Default as `<button>`

Disabled as `<button>`

Tooltips

Default

Different Symbol

Simple Html Content

Complex Html Content

Default

Different Symbol

Simple Html Content

Complex Html Content

Default

Different Symbol

Simple Html Content

Complex Html Content

Default

Different Symbol

Simple Html Content

Complex Html Content

Default

Different Symbol

Simple Html Content

Complex Html Content

Simple links

Basic usage with link:

This is a link

Basic usage with link and custom content:

This is a random content

Fallback without link:

Link an image:

Breadcrumbs

Default

Home |

Don't show start

Disabled

Home |

Default

Home |

Don't show start

Disabled

Home |

Default

Home |

Don't show start

Disabled

Home |

Default

Home |

Don't show start

Disabled

Home |

Default

Home |

Don't show start

Disabled

Home |

Pagination

Form

Cards

Teaser Cards

This is a nice card

Lorem ipsum dolor sit amet consectetur adipiscing elit risus conubia condimentum venenatis, bibendum dapibus dignissim aliquet netus aenean ac egestas facilisis tristique, erat et sem porttitor nascetur sociosqu rutrum inceptos purus nullam. Donec mattis quam mus taciti arcu viverra per fusce nec, curabitur lacinia cum vehicula massa etiam mi semper.

This is a link