Title

A small heading set in all caps for emphasis. A Title summarises a section and can be used either on its own or in conjunction with another Heading.

Default title

Titles do not wrap unto a new line, so use only very short strings of text.

Title

<h1 class="Title">Title</h1>

Sizes

There are 3 size variations available.

Title size 1

Title size 2

Title size 3

<h1 class="Title size1">Title size 1</h1>
<h1 class="Title size2">Title size 2</h1>
<h1 class="Title size3">Title size 3</h1>

Responsive sizes

Each size can be toggled as the viewport width changes, using the 4 responsive prefixes. Resize your browser window the see the title adapt.

Responsive title

<h1 class="Title size1 bp1-size2 bp3-size3">Responsive title</h1>

Colors

Colors are handled with utility classes. The recommended color values are 600 for light backgrounds and 300 for dark backgrounds. Check out the color docs for more detailed guidelines on color usage.

Red

Pink

Indigo

Violet

Blue

Teal

Lime

Green

Yellow

Amber

Orange

Purple

Gray

Red

Pink

Indigo

Violet

Blue

Teal

Lime

Green

Yellow

Amber

Orange

Purple

Gray

<!-- Light background -->

<h1 class="Title color-red600">...</h1>
<h1 class="Title color-pink600">...</h1>
<h1 class="Title color-indigo600">...</h1>
<h1 class="Title color-violet600">...</h1>
<h1 class="Title color-blue600">...</h1>
<h1 class="Title color-teal600">...</h1>
<h1 class="Title color-lime600">...</h1>
<h1 class="Title color-green600">...</h1>
<h1 class="Title color-yellow600">...</h1>
<h1 class="Title color-amber600">...</h1>
<h1 class="Title color-orange600">...</h1>
<h1 class="Title color-purple600">...</h1>

<!-- Dark background -->

<h1 class="Title color-red300">...</h1>
<h1 class="Title color-pink300">...</h1>
<h1 class="Title color-indigo300">...</h1>
<h1 class="Title color-violet300">...</h1>
<h1 class="Title color-blue300">...</h1>
<h1 class="Title color-teal300">...</h1>
<h1 class="Title color-lime300">...</h1>
<h1 class="Title color-green300">...</h1>
<h1 class="Title color-yellow300">...</h1>
<h1 class="Title color-amber300">...</h1>
<h1 class="Title color-orange300">...</h1>
<h1 class="Title color-purple300">...</h3>