Add one of the following classes to modify the size and style of headings. Usually, these classes would be used on heading elements but they work also with any other element like a div element. Note that these classes extend the heading classes from the Base component upward, and the smallest modifier picks up the size after h1 element.

PREVIEW

Small

Medium

Large

XLarge

2XLarge

Divider modifier

To apply a divider to a heading, add the .uk-heading-divider class. You can combine it with any size modifier.

PREVIEW

Heading Divider

<h1 class="uk-heading-divider">Heading Divider</h1>

Bullet modifier

To apply a bullet to a heading, add the .uk-heading-bullet class. You can combine it with any size modifier, and it works well with text alignment.

PREVIEW

Heading Bullet

<h1 class="uk-heading-bullet">Heading Bullet</h1>

Line modifier

To apply a vertically centered line to a heading, add the .uk-heading-line class and place a span element inside the heading element. You can combine it with any size modifier, and it works well with text alignment.

PREVIEW

Heading Line

Heading Line

Heading Line

Divider small

Add the .uk-divider-small class to a <hr> or <div> element to create a smaller divider.

PREVIEW

Heading text


<h1 class="uk-divider-small">Heading Text</h1>

Divider Custom colours

Add the .border-primary .border-success .border-info .border-warning or .border-danger class to a <hr>
to change border size use .border-size-1 ...... .border-size-5

PREVIEW

Heading text


Heading text


Heading text


Heading text


Heading text


Heading text



© 2019 Sasuke. All Rights Reserved.