H3 (heading 3 / overline)

H1 (Heading 1)

H2 (Heading 2)

Paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

H4 (Heading 4)

Text Link Secondary light primary

Layout

Columns

alignment Wrapper

Align-L

Using a left wrapper is basically
the same as default, unless you need
to override the parent
container setting.

alignment Wrapper

Align-C

Center align elements within
the parent container, and have fewer classes.
Width is unconstrained.

alignment Wrapper

Align-R

Or right align your content within
a parent element.

Width & Spacing

Vertical Spacing

Adds vertical space between elements, or serves as a fixed-height container for child elements.

V-LG

V-MD

v-SM

v-XS

Horizontal Widths

Restricts the width of child elements to a "medium" or "small" amount of horizontal space, automatically adjusting to screen sizes.

W-MD

W-SM

Images

Portraits and Illustrations

When using photos or illustrations, a natural border is usually formed by the range of colors and contrast in the photo that differ with the background. Use one of these classes to soften corners at a scale that is appropriate for the use case of small, medium, or large imagery.