Toggle navigation

Styleguide

Project Colors

Brand Colors

Typography

H1

The quick brown fox jumps
over the lazy dog 0123456789

H2

The quick brown fox jumps
over the lazy dog

H3

The quick brown fox jumps
over the lazy dog

H4

The quick brown fox jumps
over the lazy dog

H5
The quick brown fox jumps
over the lazy dog
Lead 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. 0123456789

H6
The quick brown fox jumps
over the lazy dog
Lead 2

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Paragraph
Normal –

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Tighter + Bold –

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Tighter + Medium –

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Small 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.

Small 2 –

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Small 2 + Bold –

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Small 3 –

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Small 4 –

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lists

Unordered list example

  • Lorem ipsum dolor sit
  • 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
  • Lorem ipsum dolor sit
–

Ordered list example

  1. Lorem ipsum dolor sit
  2. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  3. Lorem ipsum dolor sit
  4. Lorem ipsum dolor sit
–

Button & Links

Links
Links Text

Lorem ipsum dolor sit amet, consetetur link elitr, sed diam nonumy eirmod Mehr erfahren invidunt ut labore et dolore magna link erat, sed diam voluptua.

Buttons level 1
Buttons level 3
Links
Buttons Level 2
Buttons Level 3
Gallery
1 8
Back Link
Zurück
Accordion

Lorem Ipsum?

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Social
Footer link
Close
Logo
S
M
L
XL
XXL