Titles

Heading class aliases

.h1–.h6 replicate the native heading look - shared font family ($title-family), weight, numbered size, and 1.15 line-height - on any element. Use them when you need an <h2>-styled element that isn't semantically a heading, or vice versa.

<!-- A visually-h2 heading that stays an h1 for a11y/SEO -->
<h1 class="h2">Page title, styled smaller</h1>

<!-- A span that looks like a heading -->
<span class="h4">Card title</span>

Reference

Same scale as font size. .h{n} reads from the framework's numbered fontSize map - see the full size table on the Typography page.