mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-11-28 10:17:49 +03:00
add examples of attribute-based customization to the style guide
This commit is contained in:
parent
1c14e66db2
commit
789d0ae7c8
@ -8,6 +8,7 @@ module Examples.Text exposing (example, State, Msg)
|
||||
|
||||
import AtomicDesignType exposing (AtomicDesignType(..))
|
||||
import Category exposing (Category(..))
|
||||
import Css
|
||||
import Example exposing (Example)
|
||||
import Html.Styled as Html
|
||||
import Html.Styled.Attributes as Attributes
|
||||
@ -67,5 +68,19 @@ example =
|
||||
, Heading.h2 [ Heading.style Heading.Top ] [ Html.text "Paragraph styles for user-authored content" ]
|
||||
, Text.ugMediumBody [] (exampleUGHtml "ugMediumBody")
|
||||
, Text.ugSmallBody [] (exampleUGHtml "ugSmallBody")
|
||||
, Heading.h2 [ Heading.style Heading.Top ] [ Html.text "One-Off Styles" ]
|
||||
, Text.mediumBody
|
||||
[ Text.css [ Css.padding (Css.px 20) ] ]
|
||||
[ Html.text "I've got more padding than my siblings!" ]
|
||||
, Html.div
|
||||
[ Attributes.css
|
||||
[ Css.width (Css.px 80)
|
||||
, Css.border3 (Css.px 1) Css.solid (Css.hex "000")
|
||||
]
|
||||
]
|
||||
[ Text.mediumBody
|
||||
[ Text.noBreak ]
|
||||
[ Html.text "I won't ever break, no matter how narrow my container is." ]
|
||||
]
|
||||
]
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user