Headings
INFO
Headings communicate the organization of the content on the page. Web browsers, plug-ins, and assistive technologies can use them to provide in-page navigation.
Related Components:
WARNING
Do not skip levels! Using the correct order gives people who use a screen reader an understanding of the heading hierarchy of a page, much like a table of contents in a book. A page should generally have a single <h1> element that describes the content of the page (similar to the document's <title> element).
However, you can also use the .h1 to .h6 classes to style text like headlines.
Headline h1
Headline .h1
html
<h1 class="c-headline">Headline h1</h1>
<p class="h1 c-headline">Headline .h1</p>Headline h2
Headline .h2
html
<h2 class="c-headline">Headline h2</h2>
<p class="h2 c-headline">Headline .h2</p>Headline h3
Headline .h3
html
<h3 class="c-headline">Headline h3</h3>
<p class="h3 c-headline">Headline .h3</p>Headline h4
Headline .h4
html
<h4 class="c-headline">Headline h4</h4>
<p class="h4 c-headline">Headline .h4</p>Headline h5
Headline .h5
html
<h5 class="c-headline">Headline h5</h5>
<p class="h5 c-headline">Headline .h5</p>Headline h6
Headline .h6
html
<h6 class="c-headline">Headline h6</h6>
<p class="h6 c-headline">Headline .h6</p>