List of available heading styles available. The font-size and margins will automatically adjust depending on breakpoints.

Page templates designs will sometimes have a non-semantic heading hierarchy (ex: the style of top heading (h1) on the page is designed to be styled like a heading medium). If that's the case, it is strongly recommended to always use semantic heading (h1 > h2 > h3...) and apply the BEM styled classes to align the style with the designs provided.

Deprecated
Highlight heading is now deprecated. Please use other headings instead.

Highlight

Special type of heading named "highlight" which is all bold (font-weight: black/700) and doesn't resize on mobile.

<!-- headings -->
<h1 class="ui-heading--highlight">Marketing highlight title</h1>

XL

<!-- XL -->
<!-- The default heading is light and doesn't require additional modifier class -->
<h1 class="ui-heading--xl">...</h1>
<h1 class="ui-heading--xl ui-heading--xl--regular">...</h1>
<h1 class="ui-heading--xl ui-heading--xl--medium">...</h1>
<h1 class="ui-heading--xl ui-heading--xl--semibold">...</h1>
<h1 class="ui-heading--xl ui-heading--xl--bold">...</h1>

LG

<!-- LG -->
<h2 class="ui-heading--lg">...</h2>
<h2 class="ui-heading--lg ui-heading--lg--regular">...</h2>
<h2 class="ui-heading--lg ui-heading--lg--medium">...</h2>
<h2 class="ui-heading--lg ui-heading--lg--semibold">...</h2>
<h2 class="ui-heading--lg ui-heading--lg--bold">...</h2>

MD

<!-- MD -->
<h3 class="ui-heading--md">...</h3>
<h3 class="ui-heading--md ui-heading--md--regular">...</h3>
<h3 class="ui-heading--md ui-heading--md--medium">...</h3>
<h3 class="ui-heading--md ui-heading--md--semibold">...</h3>
<h3 class="ui-heading--md ui-heading--md--bold">...</h3>

SM

<!-- SM -->
<h4 class="ui-heading--sm">...</h4>
<h4 class="ui-heading--sm ui-heading--sm--regular">...</h4>
<h4 class="ui-heading--sm ui-heading--sm--medium">...</h4>
<h4 class="ui-heading--sm ui-heading--sm--semibold">...</h4>
<h4 class="ui-heading--sm ui-heading--sm--bold">...</h4>

XS

<!-- XS -->
<h5 class="ui-heading--xs">...</h5>
<h5 class="ui-heading--xs ui-heading--xs--regular">...</h5>
<h5 class="ui-heading--xs ui-heading--xs--medium">...</h5>
<h5 class="ui-heading--xs ui-heading--xs--semibold">...</h5>
<h5 class="ui-heading--xs ui-heading--xs--bold">...</h5>

XXS

<!-- XXS -->
<h6 class="ui-heading--xxs">...</h6>
<h6 class="ui-heading--xxs ui-heading--xxs--regular">...</h6>
<h6 class="ui-heading--xxs ui-heading--xxs--medium">...</h6>
<h6 class="ui-heading--xxs ui-heading--xxs--semibold">...</h6>
<h6 class="ui-heading--xxs ui-heading--xxs--bold">...</h6>