Headings: <h1> to <h6> with Designsystemet's heading text styles.
Mirrors Heading from @digdir/designsystemet-react.
Heading.h2 [ Heading.size Heading.Large ] [ Html.text "Mine saker" ]Screen readers and the document outline only see the level. Pick it from the page structure, and the size from the design.
<Heading level={1}> → Heading.h1 []<Heading> (level defaults to 2) → Heading.h2 []level={level} computed at runtime → Heading.view level []data-size="lg" → Heading.size Heading.LargeasChild + <legend> → Heading.viewAs Html.legend []React defaults to <h2>. Here the level is always explicit, since a heading
at the wrong level is an accessibility bug you can't see on screen.
A section heading.
A sub-section heading.
An <h4 class="ds-heading">.
An <h5 class="ds-heading">.
An <h6 class="ds-heading">.
A heading level decided at runtime, e.g. in a section component used at different depths.
A heading at a level you computed.
sectionHeading : Heading.Level -> String -> Html msg
sectionHeading level title =
Heading.view level [ Heading.size Heading.Small ] [ Html.text title ]Heading styles on another element (React's asChild).
Html.fieldset []
[ Heading.viewAs Html.legend
[ Heading.size Heading.ExtraSmall ]
[ Html.text "Kontaktinformasjon" ]
]Use it only on elements that aren't headings in the outline, like <legend>,
<caption> or <summary>. Real headings should use h1–h6
so assistive technology can navigate by them.
Headings have their own size scale, wider than
Designsystemet.Size. Without a size, a heading is
1.3em of the surrounding text.
A top-level heading: usually one per page.