Utilities

Use these classes to quickly adjust the style of text.

Sizes

<!-- Font weight classes -->
<p class="miz-text--sm"> ... </p>
<p class="miz-text--md"> ... </p>
<p class="miz-text--lg"> ... </p>

Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut quam tristique neque tincidunt fermentum. Etiam in odio non erat porta vulputate a id neque. Fusce id neque fermentum, consectetur ex facilisis, accumsan lectus.

Medium (default)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut quam tristique neque tincidunt fermentum. Etiam in odio non erat porta vulputate a id neque. Fusce id neque fermentum, consectetur ex facilisis, accumsan lectus.

Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut quam tristique neque tincidunt fermentum. Etiam in odio non erat porta vulputate a id neque. Fusce id neque fermentum, consectetur ex facilisis, accumsan lectus.


Weight

<!-- Font weight classes -->
<p class="miz-text--light"> ... </p>
<p class="miz-text--normal"> ... </p>
<p class="miz-text--bold"> ... </p>

Light

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut quam tristique neque tincidunt fermentum. Etiam in odio non erat porta vulputate a id neque. Fusce id neque fermentum, consectetur ex facilisis, accumsan lectus.

Normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut quam tristique neque tincidunt fermentum. Etiam in odio non erat porta vulputate a id neque. Fusce id neque fermentum, consectetur ex facilisis, accumsan lectus.

Bold

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut quam tristique neque tincidunt fermentum. Etiam in odio non erat porta vulputate a id neque. Fusce id neque fermentum, consectetur ex facilisis, accumsan lectus.

Color

There are a number of text color utilities that correspond with our color palette. We are planning on creating a more robust collection of choices that match components and variants in ways that do not overlook accessibility.

Class Example
.miz-text--black This is black text.
.miz-text--black-300 This is black 300 text.
.miz-text--red This is red text.
.miz-text--blue This is blue text.
.miz-text--green This is green text.