Headings (H1 - H6)
Standard typography hierarchy for page structure and content sections.
| Level | Purpose | Preview (Live) | Code Snippet |
|---|---|---|---|
| H1 | Main page title. Should exist only once! | Headline H1 | <h1>Headline H1</h1> |
| H2 | Major section header | Headline H2 | <h2>Headline H2</h2> |
| H3 | Sub-section header | Headline H3 | <h3>Headline H3</h3> |
| H4 | Minor section header | Headline H4 | <h4>Headline H4</h4> |
| H5 | Small header / Label | Headline H5 | <h5>Headline H5</h5> |
| H6 | Accent / Detail header | Headline H6 | <h6>Headline H6</h6> |
TIP
Each heading level is also available as a helper class for use on other elements, such as <span> or <div>, to apply the corresponding heading styles without using the semantic heading tags. For example, you can use <span class="h3">...</span> to apply H3 styles to a span element.