Headings
Heading component classes (.cmp-heading-1 through .cmp-heading-6) apply heading typography styles independently of the HTML heading level. This allows visual flexibility while maintaining correct document semantics.
Important: The design system’s base heading styles only apply to elements with no class attribute (via :not([class]) selectors). If you add any class to a heading — even a utility class like .util-color-red — the base styles will no longer apply. In those cases, use one of the .cmp-heading-* classes alongside your other classes to retain the heading typography.
Examples
Section titled “Examples”Heading 1 Component
<h2 class="cmp-heading-1">Heading 1 Component</h2>Heading 2 Component
<h2 class="cmp-heading-2">Heading 2 Component</h2>Heading 3 Component
<h2 class="cmp-heading-3">Heading 3 Component</h2>Heading 4 Component
<h2 class="cmp-heading-4">Heading 4 Component</h2>Heading 5 Component
<h2 class="cmp-heading-5">Heading 5 Component</h2>Heading 6 Component
<h2 class="cmp-heading-6">Heading 6 Component</h2>CSS Classes
Section titled “CSS Classes”| Class | Font | Size | Style |
|---|---|---|---|
.cmp-heading-1 | Merriweather (serif) | 2.5rem | Normal weight |
.cmp-heading-2 | Oswald (sans) | 2.25rem | Normal weight, uppercase, underline accent |
.cmp-heading-3 | Merriweather Sans (alt) | 1.75rem | Normal weight |
.cmp-heading-4 | Merriweather (serif) | 1.625rem | Bold |
.cmp-heading-5 | Merriweather Sans (alt) | 1.375rem | Bold |
.cmp-heading-6 | Merriweather Sans (alt) | 1.125rem | Bold, uppercase |
Use heading components when the visual presentation should differ from the semantic heading level:
<h3 class="cmp-heading-1">Visually large, semantically h3</h3><h2 class="cmp-heading-4">Visually small, semantically h2</h2>Each heading component applies the same typography mixin as its corresponding base heading element (h1–h6), so the visual styles are identical.