NoRedInk/noredink-ui/6.24.1

NOTE: the latest version is 35.9.3

Nri.Ui.Text.V3

Changes from V2:

  • Normalizes how margin is applied (see "Understanding spacing", below).

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 text styles have padding.
  • Heading styles do not have margin. It is up to the caller to add appropriate margin to the layout.
  • Paragraph styles only have bottom margin, but with :last-child bottom margin set to zero. This bottom margin is set to look good when multiple paragraphs of the same style follow one another.
    • If you want content after the paragraph and don't want the margin, put the paragraph in a div so that it will be the last-child, which will get rid of the bottom margin.
  • User-authored content blocks preserve line breaks and do not have margin.

Heading styles

heading : List (Html msg) -> Html msg

This is a Page Heading.

subHeading : List (Html msg) -> Html msg

This is a subhead.

smallHeading : List (Html msg) -> Html msg

This is a small Page Heading.

tagline : List (Html msg) -> Html msg

This is a tagline for a page heading.

Paragraph styles

caption : List (Html msg) -> Html msg

This is a little note or caption.

mediumBody : List (Html msg) -> Html msg

This is some medium body copy.

smallBody : List (Html msg) -> Html msg

This is some small body copy.

smallBodyGray : List (Html msg) -> Html msg

This is some small body copy but it's gray.

User-authored content blocks:

ugMediumBody : List (Html msg) -> Html msg

User-generated text.

ugSmallBody : List (Html msg) -> Html msg

User-generated text.

Modifying strings to display nicely:

noWidow : String -> String

Eliminate widows (single words on their own line caused by wrapping) by inserting a non-breaking space if there are at least two words.