Base Heading

HTML markup

<h1 class="pier-heading">Base Heading</h1>

<h1 class="pier-heading">Base Heading</h1>

Sizes

Use the modifier classes pier-heading--xs, pier-heading--sm, pier-heading--md, or pier-heading--lg to change the size of the heading text.

Extra-Small Heading

Small Heading

Medium Heading

Large Heading

HTML markup

<h1 class="pier-heading pier-heading--xs">Extra-Small Heading</h1>
<h1 class="pier-heading pier-heading--sm">Small Heading</h1>
<h1 class="pier-heading pier-heading--md">Medium Heading</h1>
<h1 class="pier-heading pier-heading--lg">Large Heading</h1>

<h1 class="pier-heading pier-heading--xs">Extra-Small Heading</h1>
<h1 class="pier-heading pier-heading--sm">Small Heading</h1>
<h1 class="pier-heading pier-heading--md">Medium Heading</h1>
<h1 class="pier-heading pier-heading--lg">Large Heading</h1>

Error

Use the modifier class pier-heading--error to change the style of the heading to red.

Error Heading

HTML markup

<h1 class="pier-heading pier-heading--error">Error Heading</h1>

<h1 class="pier-heading pier-heading--error">Error Heading</h1>

Dark

Use the modifier class pier-heading--dark to change the style of the heading for dark UI themes.

Dark Heading

HTML markup

<h1 class="pier-heading pier-heading--dark">Dark Heading</h1>

<h1 class="pier-heading pier-heading--dark">Dark Heading</h1>

Abstracts Components Utilities Attributions