A heading acts as a title for the content that immediately follows it. We’ve declared default sizes for headings in keeping with their standard ranking but this base size can be overridden with more context-specific styling.

There are presentational utility classes available that you can apply to any heading:

  • mzp-u-heading-2xl
  • mzp-u-heading-xl
  • mzp-u-heading-lg
  • mzp-u-heading-md
  • mzp-u-heading-sm
  • mzp-u-heading-xs
  • mzp-u-heading-2xs
  • mzp-u-heading-3xs
<h1>h1: Jived fox nymph grabs quick waltz.</h1>
<h1 class="mzp-u-heading-md">h1: Jived fox nymph grabs quick waltz.</h1>
<h1 class="mzp-u-heading-sm">h1: Jived fox nymph grabs quick waltz.</h1>
<h1 class="mzp-u-heading-xs">h1: Jived fox nymph grabs quick waltz.</h1>