Typography

Text Styles

u-text-style-display

Heading

u-text-style-h1

Heading

u-text-style-h2

Heading

u-text-style-h3

Heading

u-text-style-h4

Heading

u-text-style-h5
Heading
u-text-style-h6
Heading
u-text-style-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

u-text-style-main

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

u-text-style-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

u-brow-text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

Weights

u-weight-regular

Lorem ipsum dolor

u-weight-medium

Lorem ipsum dolor

u-weight-semibold

Lorem ipsum dolor

u-weight-bold

Lorem ipsum dolor

Line Height

u-line-height-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-line-height-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-line-height-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-line-height-huge

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Letter Spacing

u-letter-spacing-tight

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-letter-spacing-normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Alignment Modes

u-alignment-start

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

u-alignment-center

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

u-alignment-end

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Text Transform

u-text-transform-none

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-text-transform-uppercase

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-text-transform-capitalize

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-text-transform-lowercase

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Wrap

u-text-wrap-default

Normal text wrapping. Useful for resetting text wrapping on a child if the parent has balance or pretty.

u-text-wrap-balance

Keeps the line width even and consistent for up to six lines of text. Ideal for short form content.

u-text-wrap-pretty

Ensures there's more than one word on the last line of text. Ideal for long form content.