Heading
Semantic heading with decoupled visual size. `as` controls the HTML element; `level` controls the visual style class (.h1–.h6 from kern.css). They can differ — a semantic h3 can look like an h5 when document hierarchy and visual design need to diverge.
Levels
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
1{{ partial:components/primitives/heading level="h1" content="Heading 1" /}}
2{{ partial:components/primitives/heading level="h2" content="Heading 2" /}}
3{{ partial:components/primitives/heading level="h3" content="Heading 3" /}}
4{{ partial:components/primitives/heading level="h4" content="Heading 4" /}}
5{{ partial:components/primitives/heading level="h5" content="Heading 5" /}}
6{{ partial:components/primitives/heading level="h6" content="Heading 6" /}}
{{ partial:components/primitives/heading level="h1" content="Heading 1" /}}
{{ partial:components/primitives/heading level="h2" content="Heading 2" /}}
{{ partial:components/primitives/heading level="h3" content="Heading 3" /}}
{{ partial:components/primitives/heading level="h4" content="Heading 4" /}}
{{ partial:components/primitives/heading level="h5" content="Heading 5" /}}
{{ partial:components/primitives/heading level="h6" content="Heading 6" /}}
Semantic vs Visual
Looks like h4, reads as h2
Looks like h6, reads as h3
1{{ partial:components/primitives/heading as="h2" level="h4" content="Looks like h4, reads as h2" /}}
2{{ partial:components/primitives/heading as="h3" level="h6" content="Looks like h6, reads as h3" /}}
{{ partial:components/primitives/heading as="h2" level="h4" content="Looks like h4, reads as h2" /}}
{{ partial:components/primitives/heading as="h3" level="h6" content="Looks like h6, reads as h3" /}}
Polymorphism
A paragraph styled as h3
1{{ partial:components/primitives/heading as="p" level="h3" content="A paragraph styled as h3" /}}
{{ partial:components/primitives/heading as="p" level="h3" content="A paragraph styled as h3" /}}
Props
| Name | Type | Default | Description |
|---|---|---|---|
as
|
string
|
Semantic HTML element (h1–h6). Defaults to the value of `level` when omitted. | |
level
|
string
|
h1
|
Visual size class applied to the element (h1–h6). Also used as the HTML element when `as` is not set. |
content
|
string
|
Heading text (falls back to default slot) | |
class
|
string
|
Additional classes merged via tw_merge (root element only) |
Slots
No slots detected.
Source
1{{#
2 @name Heading
3 @desc Semantic heading with decoupled visual size. `as` controls the HTML element; `level` controls the visual style class (.h1–.h6 from kern.css). They can differ — a semantic h3 can look like an h5 when document hierarchy and visual design need to diverge.
4 @param as string - Semantic HTML element (h1–h6). Defaults to the value of `level` when omitted.
5 @param level string [h1] - Visual size class applied to the element (h1–h6). Also used as the HTML element when `as` is not set.
6 @param content string - Heading text (falls back to default slot)
7 @param class string - Additional classes merged via tw_merge (root element only)
8#}}
9{{ _el = as ?? level ?? 'h1' }}
10{{ _level = level ?? 'h1' }}
11<{{ _el }} class="{{ '{_level} {class}' | tw_merge }}">
12 {{ content ?? slot }}
13</{{ _el }}>
{{#
@name Heading
@desc Semantic heading with decoupled visual size. `as` controls the HTML element; `level` controls the visual style class (.h1–.h6 from kern.css). They can differ — a semantic h3 can look like an h5 when document hierarchy and visual design need to diverge.
@param as string - Semantic HTML element (h1–h6). Defaults to the value of `level` when omitted.
@param level string [h1] - Visual size class applied to the element (h1–h6). Also used as the HTML element when `as` is not set.
@param content string - Heading text (falls back to default slot)
@param class string - Additional classes merged via tw_merge (root element only)
#}}
{{ _el = as ?? level ?? 'h1' }}
{{ _level = level ?? 'h1' }}
<{{ _el }} class="{{ '{_level} {class}' | tw_merge }}">
{{ content ?? slot }}
</{{ _el }}>
Dependencies
Packages
1composer require marcorieser/tailwind-merge-statamic
composer require marcorieser/tailwind-merge-statamic