Heading
Page and section titles in four sizes, decoupled from heading level.
Extra large
Large
Medium
Small
Show the markup
<h2 class="cc-heading cc-heading--xl">Extra large</h2>
<h2 class="cc-heading cc-heading--lg">Large</h2>
<h2 class="cc-heading cc-heading--md">Medium</h2>
<h2 class="cc-heading cc-heading--sm">Small</h2>Latest news
All newsShow the markup
<div class="cc-section-head">
<h2 class="cc-heading cc-heading--md">Latest news</h2>
<a class="cc-link" href="#">All news</a>
</div>Accessibility
- Visual size and heading level are independent — pick the
h1–h6that keeps the outline logical, then size with the modifier. - One
h1per page; never skip levels going down.