Nri.Ui.Heading.V2

Headings with customization options for accessibility.

h1 : List (Attribute msg) -> List (Html msg) -> Html msg

Make a first-level heading (styled like a top-level heading by default.)

Use this to upgrade from Nri.Ui.Text.V2.heading.

h2 : List (Attribute msg) -> List (Html msg) -> Html msg

Make a second-level heading (styled like a tagline by default.)

Use this to upgrade from Nri.Ui.Text.V2.tagline.

h3 : List (Attribute msg) -> List (Html msg) -> Html msg

Make a third-level heading (styled like a subhead by default.)

Use this to upgrade from Nri.Ui.Text.V2.subHeading.

h4 : List (Attribute msg) -> List (Html msg) -> Html msg

Make a fourth-level heading (styled like a small heading by default.)

Use this to upgrade from Nri.Ui.Text.V2.smallHeading.

h5 : List (Attribute msg) -> List (Html msg) -> Html msg

Make a fifth-level heading (styled like a small heading by default.)

style : Style -> Attribute msg

Select which of the base styles this heading should look like. Each of h1..5 has a default, check their docs to see if you don't need to override this.

type Style

= Top

| Tagline

| Subhead

| Small

css : List Style -> Attribute msg

Set some custom CSS in this heading. For example, maybe you need to tweak margins. Now you can!

error : Attribute msg

Use this when the header is on top of a section in an error state.

errorIf : Bool -> Attribute msg

Show an error if some condition is met.

Heading.h1
    [ Heading.errorIf (model.errorMessage /= Nothing) ]
    [ Html.text "Hello! ]

customAttr : Attribute msg -> Attribute msg

Set some custom attribute. You can do anything here, but please don't make headers interactive! Use buttons or links instead so that keyboard and screen reader users can use the site too.

NoRedInk/noredink-ui/7.14.1

Nri.Ui.Heading.V2

Modules