Colors
NameCSS classesRGBHEX
TEXT
keine Hintergrundfarbe.bg_color_default (Background)
.color_default (Text)
TEXT
WeiƟ.bg_color_white (Background)
.color_white (Text)
TEXT
Rot.bg_color_red (Background)
.color_red (Text)
TEXT
Grau.bg_color_gray (Background)
.color_gray (Text)
Headlines

H1 / Lorem ipsum dolor sit amet, est vulputate, id ac purus.

H2 / Lorem ipsum dolor sit amet, est vulputate, id ac purus.

H3 / Lorem ipsum dolor sit amet, est vulputate, id ac purus.

H4 / Lorem ipsum dolor sit amet, est vulputate, id ac purus.

H5 / Lorem ipsum dolor sit amet, est vulputate, id ac purus.
Text/Paragraph

Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare. Curabitur integer, risus mi. Morbi praesent. Sapien ridiculus, nullam pellentesque elit, feugiat nunc neque. Magna eget. Eget non a, aenean sed ridiculus. Fermentum etiam. Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare.

Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare. Curabitur integer, risus mi. Morbi praesent. Sapien ridiculus, nullam pellentesque elit, feugiat nunc neque. Magna eget. Eget non a, aenean sed ridiculus. Fermentum etiam. Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare.

Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare. Curabitur integer, risus mi. Morbi praesent. Sapien ridiculus, nullam pellentesque elit, feugiat nunc neque. Magna eget. Eget non a, aenean sed ridiculus. Fermentum etiam. Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare.

Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare. Curabitur integer, risus mi. Morbi praesent. Sapien ridiculus, nullam pellentesque elit, feugiat nunc neque. Magna eget. Eget non a, aenean sed ridiculus. Fermentum etiam. Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare.

Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare. Curabitur integer, risus mi. Morbi praesent. Sapien ridiculus, nullam pellentesque elit, feugiat nunc neque. Magna eget. Eget non a, aenean sed ridiculus. Fermentum etiam. Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare.

Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare. Curabitur integer, risus mi. Morbi praesent. Sapien ridiculus, nullam pellentesque elit, feugiat nunc neque. Magna eget. Eget non a, aenean sed ridiculus. Fermentum etiam. Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare.

Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare. Curabitur integer, risus mi. Morbi praesent. Sapien ridiculus, nullam pellentesque elit, feugiat nunc neque. Magna eget. Eget non a, aenean sed ridiculus. Fermentum etiam. Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare.

Calculations

H1

calculating

H2

calculating

H3

calculating

H4

calculating
H1
calculating

Text/Paragraph

calculating
Text examples

H1 Lorem ipsum dolor sit amet, est vulputate, id ac purus.

Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare. Curabitur integer, risus mi. Morbi praesent. Sapien ridiculus, nullam pellentesque elit, feugiat nunc neque. Magna eget. Eget non a, aenean sed ridiculus. Fermentum etiam. Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare.

BOLD text:
Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare. Curabitur integer, risus mi. Morbi praesent. Sapien ridiculus, nullam pellentesque elit, feugiat nunc neque. Magna eget. Eget non a, aenean sed ridiculus. Fermentum etiam. Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare.

Italic text:
Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare. Curabitur integer, risus mi. Morbi praesent. Sapien ridiculus, nullam pellentesque elit, feugiat nunc neque. Magna eget. Eget non a, aenean sed ridiculus. Fermentum etiam. Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare.

Bold+italic text:
Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare. Curabitur integer, risus mi. Morbi praesent. Sapien ridiculus, nullam pellentesque elit, feugiat nunc neque. Magna eget. Eget non a, aenean sed ridiculus. Fermentum etiam. Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare.

H2 Lorem ipsum dolor sit amet, est vulputate, id ac purus.

Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare. Curabitur integer, risus mi. Morbi praesent. Sapien ridiculus, nullam pellentesque elit, feugiat nunc neque. Magna eget. Eget non a, aenean sed ridiculus. Fermentum etiam. Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare.

H3 Lorem ipsum dolor sit amet, est vulputate, id ac purus.

Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare. Curabitur integer, risus mi. Morbi praesent. Sapien ridiculus, nullam pellentesque elit, feugiat nunc neque. Magna eget. Eget non a, aenean sed ridiculus. Fermentum etiam. Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare.

H4 Lorem ipsum dolor sit amet, est vulputate, id ac purus.

Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare. Curabitur integer, risus mi. Morbi praesent. Sapien ridiculus, nullam pellentesque elit, feugiat nunc neque. Magna eget. Eget non a, aenean sed ridiculus. Fermentum etiam. Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare.

H5 Lorem ipsum dolor sit amet, est vulputate, id ac purus.

Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare. Curabitur integer, risus mi. Morbi praesent. Sapien ridiculus, nullam pellentesque elit, feugiat nunc neque. Magna eget. Eget non a, aenean sed ridiculus. Fermentum etiam. Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare.

Unordered list
  • Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare, suspendisse in, proin velit, est vulputate, id ac purus.
  • Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare, suspendisse in, proin velit, est vulputate, id ac purus.
  • Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare, suspendisse in, proin velit, est vulputate, id ac purus.
    • Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare, suspendisse in, proin velit, est vulputate, id ac purus.
    • Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare, suspendisse in, proin velit, est vulputate, id ac purus.
    • Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare, suspendisse in, proin velit, est vulputate, id ac purus.
      • Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare, suspendisse in, proin velit, est vulputate, id ac purus.
      • Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare, suspendisse in, proin velit, est vulputate, id ac purus.
      • Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare, suspendisse in, proin velit, est vulputate, id ac purus.
Ordered list
  1. Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare, suspendisse in, proin velit, est vulputate, id ac purus.
  2. Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare, suspendisse in, proin velit, est vulputate, id ac purus.
  3. Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare, suspendisse in, proin velit, est vulputate, id ac purus.
    1. Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare, suspendisse in, proin velit, est vulputate, id ac purus.
    2. Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare, suspendisse in, proin velit, est vulputate, id ac purus.
    3. Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare, suspendisse in, proin velit, est vulputate, id ac purus.
      1. Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare, suspendisse in, proin velit, est vulputate, id ac purus.
      2. Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare, suspendisse in, proin velit, est vulputate, id ac purus.
      3. Lorem ipsum dolor sit amet, est vulputate, id ac purus. Libero ultricies adipiscing. Luctus integer ornare, suspendisse in, proin velit, est vulputate, id ac purus.
Unformatted, default table layout
HEADLorem ipsum dolor sit amet, est vulputate, id ac purus.Lorem ipsum dolor sit amet, est vulputate, id ac purus.Lorem ipsum dolor sit amet, est vulputate, id ac purus.
BODYLorem ipsum dolor sit amet, est vulputate, id ac purus.Lorem ipsum dolor sit amet, est vulputate, id ac purus.Lorem ipsum dolor sit amet, est vulputate, id ac purus.
Lorem ipsum dolor sit amet, est vulputate, id ac purus.Lorem ipsum dolor sit amet, est vulputate, id ac purus.Lorem ipsum dolor sit amet, est vulputate, id ac purus.
Lorem ipsum dolor sit amet, est vulputate, id ac purus.Lorem ipsum dolor sit amet, est vulputate, id ac purus.Lorem ipsum dolor sit amet, est vulputate, id ac purus.
Buttons
ButtonCSS-ClassValues (coded) BETAValues (calculated) BETA
Buttonbuttonbackground-color: #EF4A59;
color: #ffffff;
display: inline-block;
font-family: 'Montserrat';
font-size: 0.9114583333vw;
font-weight: 500;
letter-spacing: 0em;
line-height: 50px;
padding: 0px 24px 0px 24px;
text-transform: uppercase;
transition-duration: 0.2s;
transition-property: transform,all;
transition-timing-function: ease-in-out;
user-select: none;
Buttonbutton button_whitebackground-color: #ffffff!important;
color: #EF4A59!important;
Different items
.
.
.