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.

ClassDescription
.uk-heading-smallAdd this class to apply a small-sized heading.
.uk-heading-mediumAdd this class to apply a medium-sized heading.
.uk-heading-largeAdd this class to apply a large-sized heading.
.uk-heading-xlargeAdd this class to apply a xlarge-sized heading.
.uk-heading-2xlargeAdd this class to apply a 2xlarge-sized heading.
.uk-heading-3xlargeAdd this class to apply a 3xlarge-sized heading.
.uk-h1Add this class to apply an h1 heading.
.uk-h2Add this class to apply an h2 heading.
.uk-h3Add this class to apply an h3 heading.
.uk-h4Add this class to apply an h4 heading.
<h1 class="uk-heading-medium"></h1>
Copy to clipboard
  • Small

    Medium

    Large

    XL X-Large

    2XL 2X-Large

    3XL 3X-Large

    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">
      <span class="uk-hidden@m"> XL </span>
      <span class="uk-visible@m"> X-Large </span>
    </h1>
    <h1 class="uk-heading-2xlarge uk-margin">
      <span class="uk-hidden@m"> 2XL </span>
      <span class="uk-visible@m"> 2X-Large </span>
    </h1>
    <h1 class="uk-heading-3xlarge uk-margin">
      <span class="uk-hidden@m"> 3XL </span>
      <span class="uk-visible@m"> 3X-Large </span>
    </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>
Copy to clipboard
  • 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>
Copy to clipboard
  • 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>
Copy to clipboard
  • 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>

Theme development

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
        }
    }
}),

Available hooks

Note If you are developing theme from scratch, you can use all these hooks. If you’re using the shadcn/ui theme, some hooks might not work as they were already in use or removed. Learn more about using hooks.

Hook NameAffected Classes
hook-small.uk-heading-small
hook-medium.uk-heading-medium
hook-large.uk-heading-large
hook-xlarge.uk-heading-xlarge
hook-2xlarge.uk-heading-2xlarge
hook-3xlarge.uk-heading-3xlarge
hook-primary.uk-heading-primary
hook-hero.uk-heading-hero
hook-divider.uk-heading-divider
hook-bullet.uk-heading-bullet::before
hook-line.uk-heading-line > ::before, .uk-heading-line > ::after
hook-misc*