NoRedInk/noredink-ui/6.26.1

NOTE: the latest version is 35.9.3

Nri.Ui.Heading.V1

Headings such as you'd find in Nri.Ui.Text.V3, but customization options for accessibility.

type Heading msg
heading : List (Html msg) -> Heading msg

start a heading. Render it with view.

Customize how the heading looks. The visual hierarchy should go Top -> Tagline -> Subhead -> Small.

heading [ text "Hello, World!" ]
    |> withVisualLevel Top
    |> view
= Top
| Tagline
| Subhead
| Small

Customize the document level of the heading. For accessibility reasons, you should have exactly one H1, and only increase the level by one. You can use a tool like axe to check this.

heading [ text "Hello, World!" ]
    |> withDocumentLevel H1
    |> view
= H1
| H2
| H3
| H4
| H5
| H6
view : Heading msg -> Html msg

render a Heading to Html. See the other docs in this module for customizations.