Styles

Heading (title)

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.

Extra extra extra small (mzp-u-title-3xs)

Extra extra small (mzp-u-title-2xs)

Extra small (mzp-u-title-xs)

Small (mzp-u-title-sm)

Medium (mzp-u-title-md)

Large (mzp-u-title-lg)

Extra large (mzp-u-title-xl)

Extra extra large (mzp-u-title-2xl)
<p class="mzp-u-title-3xs">Extra extra extra small (mzp-u-title-3xs)</p> <p class="mzp-u-title-2xs">Extra extra small (mzp-u-title-2xs)</p> <p class="mzp-u-title-xs">Extra small (mzp-u-title-xs)</p> <p class="mzp-u-title-sm">Small (mzp-u-title-sm)</p> <p class="mzp-u-title-md">Medium (mzp-u-title-md)</p> <p class="mzp-u-title-lg">Large (mzp-u-title-lg)</p> <p class="mzp-u-title-xl">Extra large (mzp-u-title-xl)</p> <p class="mzp-u-title-2xl">Extra extra large (mzp-u-title-2xl)</p>

Background color (background_color)

Secondary (mzp-t-background-secondary)

Tertiary (mzp-t-background-tertiary)

Dark (mzp-t-dark)
<p class="mzp-t-background-secondary">Secondary (mzp-t-background-secondary)</p> <p class="mzp-t-background-tertiary">Tertiary (mzp-t-background-tertiary)</p> <p class="mzp-t-dark">Dark (mzp-t-dark)</p>