Ui.Heading

Content Element: Heading

Using the .title and .subtitle element classes gives greater control over the ranking and appearance of headings by making HTML markup independent of font-size rendering. With Bulma CSS, size modifier classes can be used to set different title and subtitle sizes for different parts of a page.

title : String -> String -> Element msg

Construct a title heading

"My Title"
  |> Ui.Heading.title "h1"
  |> Ui.Modifier.add "is-4"
  |> Ui.render


--> <h1 class="title is-4">My Title</h1>

HTML tag: variable (use <h1> to <h6>, or <p>)
ARIA role: default
Element class: .title
Available modifiers: size, spacing, color, alignment, weight, character style
Bulma CSS reference: http://bulma.io/documentation/elements/title/

subtitle : String -> String -> Element msg

Construct a subtitle heading

"My Subtitle"
  |> Ui.Element.subtitle "h2"
  |> Ui.Modifier.add "is-6"
  |> Ui.render


--> <h2 class="subtitle is-6">My Subtitle</h2>

HTML tag: variable (use <h2> to <h6>, or <p>)
ARIA role: default
Element class: .subtitle
Available modifiers: size, spacing, color, alignment, weight, character style
Bulma CSS reference: http://bulma.io/documentation/elements/title/

danielnarey/elm-modular-ui/1.1.0

Ui.Heading

Content Element: Heading

Modules