Basic

Header

Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae vero architecto rerum sed non eum qui odio sint! Sunt ad numquam ducimus aut minus nihil, officiis quidem eum inventore eos?
Square

Header Lorem ipsum dolor sit amet consectetur adipisicing elit

Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae vero architecto rerum sed non eum qui odio sint! Sunt ad numquam ducimus aut minus nihil, officiis quidem eum inventore eos?
Centered

Header

Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae vero architecto rerum sed non eum qui odio sint! Sunt ad numquam ducimus aut minus nihil, officiis quidem eum inventore eos?
Right

Header

Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae vero architecto rerum sed non eum qui odio sint! Sunt ad numquam ducimus aut minus nihil, officiis quidem eum inventore eos?
Colors

Primary

Primary

Info

Success

Warning

Danger

Grey

Grey Light

Red

Red Light

Red Lighter

Yellow

Yellow Light

Yellow Lighter

Purple

Purple Light

Purple Lighter

Green

Green Light

Green Lighter

Spaces

Small

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto tempora nostrum harum voluptates maiores, voluptas neque aliquid at illum rem alias officia perspiciatis odio ut libero atque. Excepturi, corporis vitae.

Normal

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate aliquam, tenetur enim nostrum perspiciatis ullam fuga odio ipsa asperiores facilis quidem nobis eaque neque officia consequatur quia commodi quis libero!

Large

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate aliquam, tenetur enim nostrum perspiciatis ullam fuga odio ipsa asperiores facilis quidem nobis eaque neque officia consequatur quia commodi quis libero!
Outlined

Outlined

Outlined

Outlined

Outlined

Outlined

Combi Header

Combi Header

Tag 1 Tag 2
Fullheight
BESTSELLER

Teaser Card

The item component can easily be combined with the card component to achieve a nice teaser layout.
Read more
BESTSELLER

Auto Height

The height of the cards adjust to the longest in the row.
Read more
BESTSELLER

Item Component

Item is used to easaly group components and not be concered about the correct spacing.
Read more
Image Teaser Flat
placeholder

Dense Card Subtitle

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque ipsum laudantium earum est odit, reprehenderit sit ad cum deleniti sequi delectus recusandae temporibus minima impedit officiis explicabo iusto. Distinctio, ab?

placeholder

Default Card Subtitle

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque ipsum laudantium earum est odit, reprehenderit sit ad cum deleniti sequi delectus recusandae temporibus minima impedit officiis explicabo iusto. Distinctio, ab?

placeholder

Image Teaser Card Subtitle

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque ipsum laudantium earum est odit, reprehenderit sit ad cum deleniti sequi delectus recusandae temporibus minima impedit officiis explicabo iusto. Distinctio, ab?

Image Teaser Wide

Image Teaser Default Full width on mobile

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque ipsum laudantium earum est odit, reprehenderit sit ad cum deleniti sequi delectus recusandae temporibus minima impedit officiis explicabo iusto. Distinctio, ab?

placeholder

Image Teaser Center Full width on mobile

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque ipsum laudantium earum est odit, reprehenderit sit ad cum deleniti sequi delectus recusandae temporibus minima impedit officiis explicabo iusto. Distinctio, ab?

placeholder

Image Teaser Right Full width on mobile

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque ipsum laudantium earum est odit, reprehenderit sit ad cum deleniti sequi delectus recusandae temporibus minima impedit officiis explicabo iusto. Distinctio, ab?

Clickable Cards

Clickable Card

Description
Clickable Card

Dense Card Subtitle

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque ipsum laudantium earum est odit, reprehenderit sit ad cum deleniti sequi delectus recusandae temporibus minima impedit officiis explicabo iusto. Distinctio, ab?

Dashboard

Info Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
Tag Position
Small
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum mollitia quas nulla vero doloremque cumque quis, maxime provident omnis architecto ullam culpa, officia, accusantium autem! Eaque perferendis quos officiis! Maxime?
Normal
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum mollitia quas nulla vero doloremque cumque quis, maxime provident omnis architecto ullam culpa, officia, accusantium autem! Eaque perferendis quos officiis! Maxime?
Large
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum mollitia quas nulla vero doloremque cumque quis, maxime provident omnis architecto ullam culpa, officia, accusantium autem! Eaque perferendis quos officiis! Maxime?
Small
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum mollitia quas nulla vero doloremque cumque quis, maxime provident omnis architecto ullam culpa, officia, accusantium autem! Eaque perferendis quos officiis! Maxime?
Normal
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum mollitia quas nulla vero doloremque cumque quis, maxime provident omnis architecto ullam culpa, officia, accusantium autem! Eaque perferendis quos officiis! Maxime?
Large
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum mollitia quas nulla vero doloremque cumque quis, maxime provident omnis architecto ullam culpa, officia, accusantium autem! Eaque perferendis quos officiis! Maxime?
Small
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum mollitia quas nulla vero doloremque cumque quis, maxime provident omnis architecto ullam culpa, officia, accusantium autem! Eaque perferendis quos officiis! Maxime?
Normal
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum mollitia quas nulla vero doloremque cumque quis, maxime provident omnis architecto ullam culpa, officia, accusantium autem! Eaque perferendis quos officiis! Maxime?
Large
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum mollitia quas nulla vero doloremque cumque quis, maxime provident omnis architecto ullam culpa, officia, accusantium autem! Eaque perferendis quos officiis! Maxime?