Common NoRedInk Containers
invalid
Shadows
Content
modulealternate
, general
, etc.) to having a single view
helper that takes a list of attributes (including themed attributes and content attributes)custom
, testId
, id
plaintext
helper and markdown
helperalternate
-> gray
general
-> default
interactable
-> pillow
interactableWithLabel
themebuttony
themeview : List (Attribute msg) -> Html.Styled.Html 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.
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.
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