NoRedInk / noredink-ui / Nri.Ui.Container.V2

Common NoRedInk Containers

TODO in next version:

Changelog

Patch changes

Changes from V1

Documentation

View

view : List (Attribute msg) -> Html.Styled.Html msg


type Attribute msg

custom : List (Html.Styled.Attribute msg) -> 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.

testId : String -> Attribute msg

id : String -> Attribute msg

css : List Css.Style -> Attribute msg

notMobileCss : List Css.Style -> Attribute msg

Set styles that will only apply if the viewport is wider than NRI's mobile breakpoint.

Equivalent to:

Container.css
    [ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.notMobile ] styles ]

mobileCss : List Css.Style -> Attribute msg

Set styles that will only apply if the viewport is narrower than NRI's mobile breakpoint.

Equivalent to:

Container.css
    [ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.mobile ] styles ]

quizEngineMobileCss : List Css.Style -> Attribute msg

Set styles that will only apply if the viewport is narrower than NRI's quiz-engine-specific mobile breakpoint.

Equivalent to:

Container.css
    [ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.quizEngineMobile ] styles ]

paddingPx : Basics.Float -> Attribute msg

Changes the padding inside the container border around the content.

Content

paragraph : String -> Attribute msg

Provide a plain-text string that will be put into a paragraph tag, with the default margin removed.

plaintext : String -> Attribute msg

Provide a plain-text string.

markdown : String -> Attribute msg

Provide a string that will be rendered as markdown.

Note that you may need to remove extra margin added by default to p tags by user agents.

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

Provide a list of custom HTML.

Themes

gray : Attribute msg

Used when there are a lot of containers.

default : Attribute msg

Used for the default container case.

disabled : Attribute msg

invalid : Attribute msg

DEPRECATED -- this will be removed in the next version of this component.

pillow : Attribute msg

Used for containers of interactive elements.

buttony : Attribute msg

Used for clickable cards