Title and subtitle

The b.Title constructor creates a title. The b.Subtitle constructor creates a subtitle.

Modifier	Action
`b.Spaced`	Maintain normal spacing between title and the following subtitle
`1`	Set size to 1
`2`	Set size to 2
`3`	Set size to 3
`4`	Set size to 4
`5`	Set size to 5
`6`	Set size to 6

Bulma examples

Bulma documentation

Example

Code

b.Title("Title"),
b.Subtitle("Subtitle")

ResultHTML

Title

Subtitle

<h1 class="title">Title</h1>
<h2 class="subtitle">Subtitle</h2>

Sizes

Bulma documentation

Example

Code

b.Title(1, "Title 1"),
b.Title(2, "Title 2"),
b.Title(3, "Title 3"),
b.Title(4, "Title 4"),
b.Title(5, "Title 5"),
b.Title(6, "Title 6")

ResultHTML

Title 1

Title 2

Title 3

Title 4

Title 5

Title 6

<h1 class="title is-1">Title 1</h1>
<h2 class="title is-2">Title 2</h2>
<h3 class="title is-3">Title 3</h3>
<h4 class="title is-4">Title 4</h4>
<h5 class="title is-5">Title 5</h5>
<h6 class="title is-6">Title 6</h6>

Example

Code

b.Subtitle(1, "Subtitle 1"),
b.Subtitle(2, "Subtitle 2"),
b.Subtitle(3, "Subtitle 3"),
b.Subtitle(4, "Subtitle 4"),
b.Subtitle(5, "Subtitle 5"),
b.Subtitle(6, "Subtitle 6")

ResultHTML

Subtitle 1

Subtitle 2

Subtitle 3

Subtitle 4

Subtitle 5

Subtitle 6

<h1 class="subtitle is-1">Subtitle 1</h1>
<h2 class="subtitle is-2">Subtitle 2</h2>
<h3 class="subtitle is-3">Subtitle 3</h3>
<h4 class="is-4 subtitle">Subtitle 4</h4>
<h5 class="subtitle is-5">Subtitle 5</h5>
<h6 class="subtitle is-6">Subtitle 6</h6>

Example

Code

b.Block(
	b.Title(1, html.P, "Title 1"),
	b.Subtitle(3, html.P, "Subtitle 3"),
),
b.Block(
	b.Title(2, html.P, "Title 2"),
	b.Subtitle(4, html.P, "Subtitle 4"),
),
b.Block(
	b.Title(3, html.P, "Title 3"),
	b.Subtitle(5, html.P, "Subtitle 5"),
)

ResultHTML

Title 1

Subtitle 3

Title 2

Subtitle 4

Title 3

Subtitle 5

<div class="block"><p class="title is-1">Title 1</p><p class="subtitle is-3">Subtitle 3</p></div>
<div class="block"><p class="title is-2">Title 2</p><p class="subtitle is-4">Subtitle 4</p></div>
<div class="block"><p class="title is-3">Title 3</p><p class="subtitle is-5">Subtitle 5</p></div>

Example

Code

b.Block(
	b.Title(1, html.P, b.Spaced, "Title 1"),
	b.Subtitle(3, html.P, "Subtitle 3"),
),
b.Block(
	b.Title(2, html.P, b.Spaced, "Title 2"),
	b.Subtitle(4, html.P, "Subtitle 4"),
),
b.Block(
	b.Title(3, html.P, b.Spaced, "Title 3"),
	b.Subtitle(5, html.P, "Subtitle 5"),
)

ResultHTML

Title 1

Subtitle 3

Title 2

Subtitle 4

Title 3

Subtitle 5

<div class="block"><p class="title is-1 is-spaced">Title 1</p><p class="subtitle is-3">Subtitle 3</p></div>
<div class="block"><p class="is-2 is-spaced title">Title 2</p><p class="subtitle is-4">Subtitle 4</p></div>
<div class="block"><p class="title is-3 is-spaced">Title 3</p><p class="is-5 subtitle">Subtitle 5</p></div>