--- layout: documentation doc-tab: elements doc-subtab: title --- {% include subnav-elements.html %}

Titles

Simple headings to add depth to your page


There are 2 types of heading:

Title

Subtitle

{% highlight html %}

Title

Subtitle

{% endhighlight %}

There are 6 sizes available:

Title 1

Title 2

Title 3 (default size)

Title 4

Title 5

Title 6

{% highlight html %}

Title 1

Title 2

Title 3

Title 4

Title 5
Title 6
{% endhighlight %}

Subtitle 1

Subtitle 2

Subtitle 3

Subtitle 4

Subtitle 5 (default size)

Subtitle 6

{% highlight html %}

Subtitle 1

Subtitle 2

Subtitle 3

Subtitle 4

Subtitle 5
Subtitle 6
{% endhighlight %}

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

{% highlight html %}

Title 1

Subtitle 3

Title 2

Subtitle 4

Title 3

Subtitle 5

{% endhighlight %}

New!

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

{% highlight html %}

Title 1

Subtitle 3

Title 2

Subtitle 4

Title 3

Subtitle 5

{% endhighlight %}