NoRedInk/noredink-ui/7.14.1

NOTE: the latest version is 35.9.3

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

Modules