Heading
Define different styles for headings.
Usage
Combine this component with the Text component to style your headings.
Size modifiers
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.
| Class | Description |
|---|---|
.uk-heading-small | Add this class to apply a small-sized heading. |
.uk-heading-medium | Add this class to apply a medium-sized heading. |
.uk-heading-large | Add this class to apply a large-sized heading. |
.uk-heading-xlarge | Add this class to apply a xlarge-sized heading. |
.uk-heading-2xlarge | Add this class to apply a 2xlarge-sized heading. |
.uk-heading-3xlarge | Add this class to apply a 3xlarge-sized heading. |
.uk-h1 | Add this class to apply an h1 heading. |
.uk-h2 | Add this class to apply an h2 heading. |
.uk-h3 | Add this class to apply an h3 heading. |
.uk-h4 | Add this class to apply an h4 heading. |
<h1 class="uk-heading-medium"></h1>
-
Small
Medium
Large
XL
2XL
3XL
h1
h2
h3
h4
-
<h1 class="uk-heading-small uk-margin">Small</h1> <h1 class="uk-heading-medium uk-margin">Medium</h1> <h1 class="uk-heading-large uk-margin">Large</h1> <h1 class="uk-heading-xlarge uk-margin">XL</h1> <h1 class="uk-heading-2xlarge uk-margin">2XL</h1> <h1 class="uk-heading-3xlarge uk-margin">3XL</h1> <h1 class="uk-h1 uk-margin">h1</h1> <h1 class="uk-h2 uk-margin">h2</h1> <h1 class="uk-h3 uk-margin">h3</h1> <h1 class="uk-h4 uk-margin">h4</h1>
Divider modifier
To apply a divider to a heading, add the .uk-heading-divider class. You can combine it with any size modifier.
<h1 class="uk-heading-divider"></h1>
-
Heading Divider
-
<h1 class="uk-heading-divider uk-h1 uk-margin">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.
<h1 class="uk-heading-bullet"></h1>
-
Heading Bullet
-
<h1 class="uk-heading-bullet uk-h1 uk-margin">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.
<h1 class="uk-heading-line"><span></span></h1>
-
Heading Line
Heading Line
Heading Line
-
<h1 class="uk-heading-line uk-h1 uk-margin"><span>Heading Line</span></h1> <h1 class="uk-heading-line uk-h1 uk-margin uk-text-center"> <span>Heading Line</span> </h1> <h1 class="uk-heading-line uk-h1 uk-margin uk-text-right"> <span>Heading Line</span> </h1>
- On This Page
- Usage
- Size modifiers
- Divider modifier
- Bullet modifier
- Line modifier