We're sorry, but this feature is not yet available. We are working hard to make it happen as soon as possible. Thank you for your patience and understanding. Please check back later for updates.
The element you clicked is for demonstration purposes only and does not lead to actual content. Everything you see here is a simulation intended to demonstrate how the UI elements might look and behave in a real application.
Define different styles for headings.
Note If you are not using Tailwind
CSS, you can skip this step. On your tailwind.config.js
file, add the Heading component
within the ui()
plugin.
import ui from "franken-ui";
ui({
components: {
heading: {
hooks: {},
media: true
}
}
}),
Combine this component with the Text component to style your headings.
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>
<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">X-Large</h1>
<h1 class="uk-heading-2xlarge uk-margin">2X-Large</h1>
<h1 class="uk-heading-3xlarge uk-margin">3X-Large</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>
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>
<h1 class="uk-heading-divider uk-h1 uk-margin">Heading Divider</h1>
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>
<h1 class="uk-heading-bullet uk-h1 uk-margin">Heading Bullet</h1>
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>
<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>