Typography

For each Headline you can also have a style class, in case you want a heading without semantic weight, you can use the classes text-h[1,2,3,4,5,6].

Headline level 1

Headline level 2

Headline level 3

Headline level 4

Headline level 5

Headline level 6

✎ PARAGRAPH

This is a simple paragraph, applied by using the tag p or the class text-p

✎ SEMIBOLD

This is a semibold paragraph, that can be applied by using the class text-semibold

✎ SMALL TEXT

This is a small text example. You can define a small text with the classs text-small. And this is a semibold small text example

✎ LARGE TEXT

This is a large text example. You can define a large text with the classs text-large. And this is a semibold large text example

✎ LINKS

This is a Link example. You can also use the .text-link class to use only its style, for example.

✎ CAPTION

This is a caption text example. A caption is a small text with small line-height. It can be applied using the class text-caption

✎ CAPTION

This is a quotation. You can apply this style by using the class text-quotation. Note that this is differente from the blockquote element.

✎ BUTTON TEXT

Button Like Text. Applied by the class text-button

✎ INPUT LABEL

✎ BLOCKQUOTE

This is a blockquote:

Anim id fugiat ullamco ullamco excepteur adipisicing nisi incididunt esse sunt ipsum sint ipsum in. Mollit enim excepteur proident deserunt laborum sint aliquip occaecat commodo. Labore nulla reprehenderit. eu anim minim adipisicing dolor. Ad aliqua amet enim amet. Duis esse magna sit non cillum labore duis ea.