Kern Component Library GitHub

Heading

Semantic heading with decoupled visual size.

Examples

Default preview

Heading One — The quick brown fox

Heading Two — The quick brown fox

Heading Three — The quick brown fox

Heading Four — The quick brown fox

Heading Five — The quick brown fox
Heading Six — The quick brown fox

This is an h3 element styled as h1 

<div class="space-y-4">

    {{ partial:components/primitives/heading level="h1" content="Heading One — The quick brown fox" }}

    {{ partial:components/primitives/heading level="h2" content="Heading Two — The quick brown fox" }}

    {{ partial:components/primitives/heading level="h3" content="Heading Three — The quick brown fox" }}

    {{ partial:components/primitives/heading level="h4" content="Heading Four — The quick brown fox" }}

    {{ partial:components/primitives/heading level="h5" content="Heading Five — The quick brown fox" }}

    {{ partial:components/primitives/heading level="h6" content="Heading Six — The quick brown fox" }}



    <div class="border-border mt-6 border-t pt-6">

        {{ partial:components/primitives/heading as="h3" level="h1" content="This is an h3 element styled as h1" }}

    </div>

</div>

Props

Name Type Default Description
as string Semantic heading element (h1-h6)
level string h1 Visual heading level class (h1-h6)
content string Heading text content (falls back to default slot)
class string Additional classes on the root element

Source

{{#

    @name Heading

    @desc Semantic heading with decoupled visual size.

    @param as string - Semantic heading element (h1-h6)

    @param level string [h1] - Visual heading level class (h1-h6)

    @param content string - Heading text content (falls back to default slot)

    @param class string - Additional classes on the root element

#}}

{{ _element = as ?? level ?? 'h1' }}

<{{ _element }} class="{{ '{level} {class}' | tw_merge }}">

    {{ content ?? slot }}

</{{ _element }}>

Dependencies

Packages

marcorieser/tailwind-merge-statamic

composer require marcorieser/tailwind-merge-statamic