--- title: Title and Subtitle layout: documentation doc-tab: elements doc-subtab: title variables: - name: $title-color value: $grey-darker - name: $title-size value: $size-3 - name: $title-weight value: $weight-semibold - name: $title-strong-color value: inherit - name: $title-strong-weight value: inherit - name: $subtitle-color value: $grey-dark - name: $subtitle-size value: $size-5 - name: $subtitle-weight value: $weight-normal - name: $subtitle-strong-color value: $grey-darker - name: $subtitle-strong-weight value: $weight-semibold --- {% capture default %}

Title

Subtitle

{% endcapture %} {% capture title_sizes %}

Title 1

Title 2

Title 3

Title 4

Title 5
Title 6
{% endcapture %} {% capture subtitle_sizes %}

Subtitle 1

Subtitle 2

Subtitle 3

Subtitle 4

Subtitle 5
Subtitle 6
{% endcapture %} {% capture combine %}

Title 1

Subtitle 3

Title 2

Subtitle 4

Title 3

Subtitle 5

{% endcapture %} {% capture spaced %}

Title 1

Subtitle 3

Title 2

Subtitle 4

Title 3

Subtitle 5

{% endcapture %} {% include subnav-elements.html %}

Titles

Simple headings to add depth to your page

{% include meta.html colors=false sizes=true variables=true %}

There are 2 types of heading:

  • .title
  • .subtitle

Title

Subtitle

{% highlight html %}{{ default }}{% endhighlight %}
{% include anchor.html name="Sizes" %}

There are 6 sizes available:

Title 1

Title 2

Title 3 (default size)

Title 4

Title 5

Title 6

{% highlight html %}{{ title_sizes }}{% endhighlight %}

Subtitle 1

Subtitle 2

Subtitle 3

Subtitle 4

Subtitle 5 (default size)

Subtitle 6

{% highlight html %}{{ subtitle_sizes }}{% 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 %}{{ combine }}{% 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 %}{{ spaced }}{% endhighlight %}
{% include variables.html element=true %}