Title

Subtitle

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

Sizes

There are 6 sizes available:

Title 1

Title 2

Title 3

Title 4

Title 5

Title 6

Subtitle 1

Subtitle 2

Subtitle 3

Subtitle 4

Subtitle 5

Subtitle 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>

<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="subtitle is-4">Subtitle 4</h4>
<h5 class="subtitle is-5">Subtitle 5</h5>
<h6 class="subtitle is-6">Subtitle 6</h6>

Combine

When you combine a title and a subtitle, they move closer together.
As a rule of thumb, it is recommended to use a size difference of two. So if you use a title is-1, combine it with a subtitle is-3.

Title 1

Subtitle 3

Title 2

Subtitle 4

Title 3

Subtitle 5

<p class="title is-1">Title 1</p>
<p class="subtitle is-3">Subtitle 3</p>

<p class="title is-2">Title 2</p>
<p class="subtitle is-4">Subtitle 4</p>

<p class="title is-3">Title 3</p>
<p class="subtitle is-5">Subtitle 5</p>

Spaced

You can maintain the normal spacing between titles and subtitles if you use the is-spaced modifier on the first element.

Title 1

Subtitle 3

Title 2

Subtitle 4

Title 3

Subtitle 5

<p class="title is-1 is-spaced">Title 1</p>
<p class="subtitle is-3">Subtitle 3</p>

<p class="title is-2 is-spaced">Title 2</p>
<p class="subtitle is-4">Subtitle 4</p>

<p class="title is-3 is-spaced">Title 3</p>
<p class="subtitle is-5">Subtitle 5</p>

Variables #

You can use these variables to customize, Simply set one or multiple of these variables before importing Buval. Learn how.

Name	Type	Default
`$title-color`	color	`$text-strong`
`$title-family`	boolean	`false`
`$title-size`	size	`$size-3`
`$title-weight`	font-weight	`$weight-semibold`
`$title-line-height`	unitless	`1.125`
`$title-strong-color`	string	`inherit`
`$title-strong-weight`	string	`inherit`
`$title-sub-size`	size	`0.75em`
`$title-sup-size`	size	`0.75em`
`$subtitle-color`	color	`$text`
`$subtitle-family`	boolean	`false`
`$subtitle-size`	size	`$size-5`
`$subtitle-weight`	font-weight	`$weight-normal`
`$subtitle-line-height`	unitless	`1.25`
`$subtitle-strong-color`	color	`$text-strong`
`$subtitle-strong-weight`	font-weight	`$weight-semibold`
`$subtitle-negative-margin`	size	`-1.25rem`