mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-12-17 02:31:56 +03:00
56 lines
1.8 KiB
Elm
56 lines
1.8 KiB
Elm
module Examples.Callout exposing (example)
|
|
|
|
{-|
|
|
|
|
@docs example
|
|
|
|
-}
|
|
|
|
import Css
|
|
import Html.Styled as Html
|
|
import Html.Styled.Attributes exposing (href, title)
|
|
import ModuleExample as ModuleExample exposing (Category(..), ModuleExample)
|
|
import Nri.Ui.Callout.V1 as Callout exposing (callout)
|
|
|
|
|
|
example : ModuleExample msg
|
|
example =
|
|
{ name = "Nri.Ui.Callout.V1"
|
|
, category = Messaging
|
|
, content =
|
|
[ -- PLAIN
|
|
Html.h3 [] [ Html.text "Originally Designed Use Case" ]
|
|
, callout
|
|
[ Callout.label (Html.text "BETA")
|
|
, Callout.custom (title "beta warning")
|
|
]
|
|
[ Html.text "This tab is still a work in progress; some of your student's information may be missing."
|
|
, Html.br [] []
|
|
, Html.text "To share your thoughts and help us improve the experience, "
|
|
, Html.a [ href "#" ] [ Html.text "click here" ]
|
|
, Html.text "."
|
|
]
|
|
|
|
-- WITH SIDE TEXT
|
|
, Html.h3 [] [ Html.text "Without side text" ]
|
|
, callout
|
|
[ Callout.custom (title "no side text") ]
|
|
[ Html.text "I feel weird without my side text!" ]
|
|
|
|
-- WITH CSS CUSTOMIZATIONS
|
|
, Html.h3 [] [ Html.text "With CSS customizations" ]
|
|
, callout
|
|
[ Callout.containerCss [ Css.margin (Css.px 20) ]
|
|
, Callout.label (Html.text "HMMM")
|
|
, Callout.custom (title "margin")
|
|
]
|
|
[ Html.text "My container styles are customized to add margin around the callout" ]
|
|
, callout
|
|
[ Callout.contentCss [ Css.textTransform Css.uppercase ]
|
|
, Callout.label (Html.text "WOW!")
|
|
, Callout.custom (title "yelling")
|
|
]
|
|
[ Html.text "My content styles are customized to yell about everything" ]
|
|
]
|
|
}
|