← back to the module index

Test: headings

headings on h1-h6

Display 6

Display 5

Display 4

Display 3

Display 2

Display 1

headings on span

Display 6 Display 5 Display 4 Display 3 Display 2 Display 1

headings with text

The following heading receive the .uikit-display-[1…6] classes.

Heading tier one (6)

The quick brown fox jumped over the lazy dog

Heading tier two (5)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac quam viverra, lobortis lacus ac, dictum ligula.

Curabitur eu porta nisl.

Straight into a heading tier three (3)

Curabitur aliquam id metus nec porttitor. Nunc lacus sapien, rutrum nec convallis pharetra, condimentum vitae turpis.

Heading tier four (3)

Sed eros tortor, ornare eu tortor vel, pulvinar commodo dolor. Phasellus bibendum lacus quis quam feugiat lacinia. Sed tellus eros, pellentesque vel posuere tempor, pretium non metus.

Heading tier five (2)

Ut erat nisl, convallis sit amet turpis vel, tincidunt dictum dolor. Praesent lacinia nulla nisi, eu suscipit ante ornare sit amet. Sed posuere urna non nibh accumsan dignissim.

Pellentesque facilisis magna lectus, in tincidunt dolor sollicitudin finibus.

Heading tier six (1)

The goby fish and pistol shrimp are closest of friends.


headings on paragraph, span

Similarly, we can apply the classes to other elements as visually necessary:

This is a paragraph using .uikit-display-4.

This is a span tag using .uikit-display-5. This is a span tag using .uikit-display-4.

And back to a regular paragraph.