NoRedInk / noredink-ui / Nri.Ui.Text.V6

Patch changes:

Changes from V5:

Understanding spacing

Headings

You're in the wrong place! Headings live in Nri.Ui.Heading.V3.

Paragraph styles

caption : List (Attribute msg) -> Accessibility.Styled.Html msg

This is a little note or caption.

mediumBody : List (Attribute msg) -> Accessibility.Styled.Html msg

This is some medium body copy.

mediumBodyGray : List (Attribute msg) -> Accessibility.Styled.Html msg

mediumBody, but with a lighter gray color than the default.

smallBody : List (Attribute msg) -> Accessibility.Styled.Html msg

This is some small body copy.

smallBodyGray : List (Attribute msg) -> Accessibility.Styled.Html msg

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

footnote : List (Attribute msg) -> Accessibility.Styled.Html msg

This is a little note or footnote. Please be aware that under the hood, this is only a paragraph tag. If you're actually citing a resource, wrap this in the cite HTML element.

User-authored content blocks:

ugMediumBody : List (Attribute msg) -> Accessibility.Styled.Html msg

User-generated text.

ugSmallBody : List (Attribute msg) -> Accessibility.Styled.Html msg

User-generated text.

Content

plaintext : String -> Attribute msg

Provide a plain-text string.

markdown : String -> Attribute msg

Provide a string that will be rendered as markdown.

html : List (Accessibility.Styled.Html msg) -> Attribute msg

Provide a list of custom HTML.

Customizations


type Attribute msg

noBreak : Basics.Bool -> Attribute msg

Pass True to prevent text from ever wrapping.

The default Text behavior is noBreak False, which means content will wrap.

css : List Css.Style -> Attribute msg

Add some custom CSS to the text. If you find yourself using this a lot, please add a stricter attribute to noredink-ui!

id : String -> Attribute msg

custom : List (Accessibility.Styled.Attribute Basics.Never) -> Attribute msg

Use this helper to add custom attributes.

Do NOT use this helper to add css styles, as they may not be applied the way you want/expect if underlying styles change. Instead, please use the css helper.

nriDescription : String -> Attribute msg

testId : String -> Attribute msg