Nri.Ui.Heading.V1

Headings with customization options for accessibility.

Understanding spacing

All text styles have a specific line-height. This is set so that when text in the given style is long enough to wrap, the spacing between wrapped lines looks good.
No heading styles have padding.
Heading styles do not have margin. It is up to the caller to add appropriate margin to the layout.

heading : List (Html msg) -> Heading msg

start a heading. Render it with view.

withVisualLevel : VisualLevel -> Heading msg -> Heading msg

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

heading [ text "Hello, World!" ]
    |> withVisualLevel Top
    |> view

type VisualLevel

= Top

| Tagline

| Subhead

| Small

withDocumentLevel : DocumentLevel -> Heading msg -> Heading msg

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

type DocumentLevel

= 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.

NoRedInk/noredink-ui/6.29.0

Nri.Ui.Heading.V1

Understanding spacing

Modules