Display headings

Traditional heading elements, namely h1, h2, and so on, 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. Display heading classes can be applied to any element of a page.

Here is an example to demonstrate display heading. Place this code at the end of the container element of index.html:

<h1 class="display-1">Display-1</h1>
<h1 class="display-2">Display-2</h1>
<h1 class="display-3">Display-3</h1>
<h1 class="display-4">Display-4</h1>
<hr>

display-1, display-2, display-3, and display-4 are the display heading classes.

Here is the output of the code: