import Color exposing (blue)
import Element
import Element.Font as Font
view =
Element.el
[ Font.color blue
, Font.size 18
, Font.family
[ Font.typeface "Open Sans"
, Font.sansSerif
]
]
(Element.text "Woohoo, I'm stylish text")
Note: Font.color
, Font.size
, and Font.family
are inherited, meaning you can set them at the top of your view and all subsequent nodes will have that value.
color : Element.Color -> Element.Attr decorative msg
size : Basics.Int -> Element.Attr decorative msg
Font sizes are always given as px
.
family : List Font -> Element.Attribute msg
import Element
import Element.Font as Font
myElement =
Element.el
[ Font.family
[ Font.typeface "Helvetica"
, Font.sansSerif
]
]
(text "")
Internal.Model.Font
typeface : String -> Font
serif : Font
sansSerif : Font
monospace : Font
external : { url : String, name : String } -> Font
alignLeft : Element.Attribute msg
Align the font to the left.
alignRight : Element.Attribute msg
Align the font to the right.
center : Element.Attribute msg
Center align the font.
justify : Element.Attribute msg
letterSpacing : Basics.Float -> Element.Attribute msg
In px
.
wordSpacing : Basics.Float -> Element.Attribute msg
In px
.
underline : Element.Attribute msg
strike : Element.Attribute msg
italic : Element.Attribute msg
unitalicized : Element.Attribute msg
This will reset bold and italic.
heavy : Element.Attribute msg
extraBold : Element.Attribute msg
bold : Element.Attribute msg
semiBold : Element.Attribute msg
medium : Element.Attribute msg
regular : Element.Attribute msg
light : Element.Attribute msg
extraLight : Element.Attribute msg
hairline : Element.Attribute msg
glow : Element.Color -> Basics.Float -> Element.Attr decorative msg
A glow is just a simplified shadow
shadow : { offset : ( Basics.Float, Basics.Float ), blur : Basics.Float, color : Element.Color } -> Element.Attr decorative msg