Ui.Text

Content Element: Text

This module contains helpers for assembling text content that may include links and font style variations. It provides an alternative to Markdown syntax that is still fairly concise, while offering more control over text appearance via CSS modifier classes.

Basic

plain : String -> Element msg

Construct plain inline text

"Time to make the donuts!"
  |> Ui.Text.plain
  |> Ui.render


--> <span>Time to make the donuts!</span>

HTML tag: 
Element class: none
Available modifiers: size, color, alignment, weight, character style
Bulma CSS reference: http://bulma.io/documentation/modifiers/typography-helpers/

link : ( String, Bool ) -> String -> Element msg

Construct text that will link to some URI. The boolean argument indicates whether the link should open in a new window.

"Click here to download"
  |> Ui.Text.link ("http://example.com/files/myfile.pdf", True)
  |> Ui.render


--> <a href="http://example.com/files/myfile.pdf" target="_blank">Click here to download</a>

HTML tag: <a>
Element class: none
Available modifiers: size, color, alignment, weight, character style
Bulma CSS reference: http://bulma.io/documentation/modifiers/typography-helpers/

Typography Helpers

italic : String -> Element msg

Construct text that will display as italic

"Time to make the donuts!"
  |> Ui.Text.italic
  |> Ui.render


--> <span class="is-italic">Time to make the donuts!</span>

HTML tag: 
Element class: none
Modifier classes: .is-italic
Available modifiers: size, color, alignment, weight, character style
Bulma CSS reference: http://bulma.io/documentation/modifiers/typography-helpers/

bold : String -> Element msg

Construct text that will display with a bold font-weight

"Time to make the donuts!"
  |> Ui.Text.bold
  |> Ui.render


--> <span class="has-text-weight-bold">Time to make the donuts!</span>

HTML tag: 
Element class: none
Modifier classes: .has-text-weight-bold
Available modifiers: size, color, alignment, weight, character style
Bulma CSS reference: http://bulma.io/documentation/modifiers/typography-helpers/

semibold : String -> Element msg

Construct text that will display with a semibold font-weight

"Time to make the donuts!"
  |> Ui.Text.semibold
  |> Ui.render


--> <span class="has-text-weight-semibold">Time to make the donuts!</span>

HTML tag: 
Element class: none
Modifier classes: .has-text-weight-semibold
Available modifiers: size, color, alignment, weight, character style
Bulma CSS reference: http://bulma.io/documentation/modifiers/typography-helpers/

light : String -> Element msg

Construct text that will display with a light font-weight

"Time to make the donuts!"
  |> Ui.Text.light
  |> Ui.render


--> <span class="has-text-weight-light">Time to make the donuts!</span>

HTML tag: 
Element class: none
Modifier classes: .has-text-weight-light
Available modifiers: size, color, alignment, weight, character style
Bulma CSS reference: http://bulma.io/documentation/modifiers/typography-helpers/

danielnarey/elm-modular-ui/1.0.2

Ui.Text

Content Element: Text

Basic

Typography Helpers

Modules