Skip to content Skip to footer navigation
Light theme Dark theme
You are reading the Statamic 6 Alpha docs. 👀

Heading

Clean and consistent headings and subheadings.

Create collection Create a collection to manage a group of entries. 
<div class="flex flex-col">

    <ui-heading size="lg">Create collection</ui-heading>

    <ui-subheading>Create a collection to manage a group of entries.</ui-subheading>

</div>

Sizes

Headings come in three sizes. If that feels too restrictive, that's okay — you'll get used to it. Less is more. Trust us.

Default Large Extra Large 
<ui-heading>Default</ui-heading>

<ui-heading size="lg">Large</ui-heading>

<ui-heading size="xl">Extra Large</ui-heading>

Heading Level

Control the heading level (h1, h2, etc) with the level prop. Without it, the heading will use a div.

Create collection 
<ui-heading level="3" size="xl">Create collection</ui-heading>

Icon

Add an appropriately sized icon to your heading with the icon prop.

<ui-heading

    size="lg"

    icon="setting-slider-vertical"

    text="Manage Settings"

></ui-heading>

As a link

Headings can have a link set with an href prop.

Visit statamic.com 
<ui-heading size="lg" href="https://statamic.com">

    Visit statamic.com

</ui-heading>