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?
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!
Flat

Flat

Flat

Flat

Flat

Flat

Combi Header

Combi Header

Tag 1 Tag 2
Teaser Card
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
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?