Text - Heading
Last updated: 9/21/21
Heading text in various sizes.
Base
Use the base class pier-heading
on a heading element.
HTML markup
<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>
Error
Use the modifier class pier-heading--error
to change the style of the heading to red.
HTML markup
<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.
HTML markup
<h1 class="pier-heading pier-heading--dark">Dark Heading</h1>
© 2021 Gumgum, Inc.