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-2xlmzp-u-heading-xlmzp-u-heading-lgmzp-u-heading-mdmzp-u-heading-smmzp-u-heading-xsmzp-u-heading-2xsmzp-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>