Type

Documentation and examples for headings, body text, and more.

¶Headings

All HTML headings, <h1> through <h6>, are available.

<h1>h1. This is a heading</h1>
<h2>h2. This is a heading</h2>
<h3>h3. This is a heading</h3>
<h4>h4. This is a heading</h4>
<h5>h5. This is a heading</h5>
<h6>h6. This is a heading</h6>

.h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.

<p class="h1">h1. This is a heading</p>
<p class="h2">h2. This is a heading</p>
<p class="h3">h3. This is a heading</p>
<p class="h4">h4. This is a heading</p>
<p class="h5">h5. This is a heading</p>
<p class="h6">h6. This is a heading</p>

¶Display headings

Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.

<h1 class="display-1">Display heading</h1>
<h1 class="display-2">Display heading</h1>
<h1 class="display-3">Display heading</h1>
<h1 class="display-4">Display heading</h1>
<h1 class="display-5">Display heading</h1>
<h1 class="display-6">Display heading</h1>

¶Lead

Make a paragraph stand out by adding .lead.

<p class="lead">
    This is a lead paragraph. It stands out from regular paragraphs.
</p>