Heading
A heading summarises a section. There are six possible tags—each representing a semantic level.
Heading tags
A Heading can use any HTML tag from h1 through h6.
I am a default heading
<h1 class="Heading">...</h1>
<h2 class="Heading">...</h2>
<h3 class="Heading">...</h3>
<h4 class="Heading">...</h4>
<h5 class="Heading">...</h5>
<h6 class="Heading">...</h6>Sizes
There are 9 sizes available. Any size can be used with any HTML tag. The default size is size3.
Heading size 1
Heading size 2
Heading size 3
Heading size 4
Heading size 5
Heading size 6
Heading size 7
Heading size 8
Heading size 9
<h3 class="Heading size1">...</h3>
<h3 class="Heading size2">...</h3>
<h3 class="Heading size3">...</h3>
<h3 class="Heading size4">...</h3>
<h3 class="Heading size5">...</h3>
<h3 class="Heading size6">...</h3>
<h3 class="Heading size7">...</h3>
<h3 class="Heading size8">...</h3>
<h3 class="Heading size9">...</h3>Responsive sizes
You can toggle sizes as the viewport width changes, using the four breakpoint class prefixes bp1-, bp2-, bp3- and bp4-. In the example below, the Heading scales from size7 to size8, then finally to size9. Resize your browser window to see the changes take effect.
I am a responsive heading
<h1 class="Heading size7 bp2-size8 bp3-size9">...</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 -->
<h3 class="Heading size4 color-red600">...</h3>
<h3 class="Heading size4 color-pink600">...</h3>
<h3 class="Heading size4 color-indigo600">...</h3>
<h3 class="Heading size4 color-violet600">...</h3>
<h3 class="Heading size4 color-blue600">...</h3>
<h3 class="Heading size4 color-teal600">...</h3>
<h3 class="Heading size4 color-lime600">...</h3>
<h3 class="Heading size4 color-green600">...</h3>
<h3 class="Heading size4 color-yellow600">...</h3>
<h3 class="Heading size4 color-amber600">...</h3>
<h3 class="Heading size4 color-orange600">...</h3>
<h3 class="Heading size4 color-purple600">...</h3>
<!-- Dark background -->
<h3 class="Heading size4 color-red300">...</h3>
<h3 class="Heading size4 color-pink300">...</h3>
<h3 class="Heading size4 color-indigo300">...</h3>
<h3 class="Heading size4 color-violet300">...</h3>
<h3 class="Heading size4 color-blue300">...</h3>
<h3 class="Heading size4 color-teal300">...</h3>
<h3 class="Heading size4 color-lime300">...</h3>
<h3 class="Heading size4 color-green300">...</h3>
<h3 class="Heading size4 color-yellow300">...</h3>
<h3 class="Heading size4 color-amber300">...</h3>
<h3 class="Heading size4 color-orange300">...</h3>
<h3 class="Heading size4 color-purple300">...</h3>Leading
By default, a Heading has no line spacing. Leading can be applied using the line-height utility classes. If a Heading uses responsive sizes, make sure to apply an appropriate line-height utility class for each relevant breakpoint. Pro tip: when setting a Heading, test it with a long string of placeholder text to check the leading at each breakpoint.
I am a really really unreasonably long heading so you can test my leading.
I am a really really unreasonably long heading so you can test my leading.
<h2 class="Heading size3 bp2-size4 lh-4 bp2-lh-5">...</h2>
<h1 class="Heading size7 bp2-size8 lh-8 bp2-lh-9">...</h1>Weight
By default, headings are bold. For a lighter weight, add a thin class.
I am a thin Heading
<h3 class="Heading size8 thin">...</h3>Examples
A collection of practical examples showing how the Heading component could be used in a variety of cases.
I am a huge title
<h1 class="Heading size8 bp2-size9 lh-7 bp2-lh-9">...</h1>A large responsive heading.
I am a large responsive heading
<h1 class="Heading size6 bp2-size8 lh-7 bp2-lh-9">...</h1>A medium responsive heading.
I am a medium responsive heading
<h1 class="Heading size6 bp2-size8 lh-7 bp2-lh-9">...</h1>A subtitle which can work well accompanying a large title.
I am a subtitle
<h1 class="Heading size3 bp2-size5 lh-5 bp2-lh-7 thin color-gray500">...</h1>A subtitle grouped together with a large title.
I am a large responsive heading
I am a subtitle below a large title
<h1 class="Heading size3 bp2-size5 lh-5 bp2-lh-7 thin color-gray500">...</h1>A small heading which works well over paragraphs.
I am a small heading
<h3 class="Heading size3 bp2-size4 lh-4 bp2-lh-5">...</h3>