Typography

Heading Styles

u-text-style-h120

Heading 120

u-text-style-h80

Heading 80

u-text-style-h72

Heading 72

u-text-style-h64

Heading 64

u-text-style-h56

Heading 56

u-text-style-h48

Heading 48

u-text-style-h40

Heading 40

u-text-style-h32

Heading 32

u-text-style-h24

Heading 24

Paragraph Styles

u-text-style-p20

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

u-text-style-p18e

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

u-text-style-p18

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

u-text-style-p16

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

u-text-style-p14

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

u-text-style-p12

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

Label Styles

u-text-style-l16

Label 16

u-text-style-l16

Label 14

u-text-style-l16

Label 12

Weights

u-weight-300

Lorem ipsum dolor

u-weight-400

Lorem ipsum dolor

u-weight-500

Lorem ipsum dolor

u-weight-600

Lorem ipsum dolor

u-weight-700

Lorem ipsum dolor

Line Clamp

u-line-clamp-1

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.

u-line-clamp-2

u-line-clamp-3

u-line-clamp-4

Text Align

u-text-align-left

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

u-text-align-center

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

u-text-align-right

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.

Typography Elements

u-rich-text

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Figure

Ordered List

Ordered list
when not inside
of rich text

Ordered list
when inside
of rich text

Unordered List

Unordered list
when not inside
of rich text

Unordered list
when inside
of rich text

Block Quotes

Block quote when not inside of a rich text element

Block quote when inside of a rich text element

Color

Themes

u-theme-light

Heading

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

u-theme-dark

Heading

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

Text Color

u-color-inherit

Lorem ipsum dolor

u-color-faded

Lorem ipsum dolor

Flexbox

Horizontal Flex Utilities

u-hflex-left-top

u-hflex-left-center

u-hflex-left-bottom

u-hflex-left-stretch

u-hflex-center-top

u-hflex-center-center

u-hflex-center-bottom

u-hflex-center-stretch

u-hflex-right-top

u-hflex-right-center

u-hflex-right-bottom

u-hflex-right-stretch

u-hflex-between-top

u-hflex-between-center

u-hflex-between-bottom

u-hflex-between-stretch

Vertical Flex Utilities

u-vflex-left-top

u-vflex-left-center

u-vflex-left-bottom

u-vflex-left-between

u-vflex-center-top

u-vflex-center-center

u-vflex-center-bottom

u-vflex-center-between

u-vflex-right-top

u-vflex-right-center

u-vflex-right-bottom

u-vflex-right-between

u-vflex-stretch-top

u-vflex-stretch-center

u-vflex-stretch-bottom

u-vflex-stretch-between

Align Self Utilities

u-align-self-auto

u-align-self-start

u-align-self-center

u-align-self-end

u-align-self-stretch

Align Items Utilities

u-align-items-stretch

u-align-items-start

u-align-items-center

u-align-items-end

Other Flex Utilities

u-hflex-wrap

u-vflex-wrap

u-flex-shrink

u-flex-grow

u-flex-noshrink

Grid

Grid Utilities

u-grid-custom

u-grid-breakout

u-grid-desktop

u-grid-tablet

u-grid-landscape

u-grid-column-2

u-grid-column-3

u-grid-column-4

u-grid-autofit

u-grid-autofill

u-grid-subgrid

u-grid-flex

Column Utilities

u-column-custom

u-column-full

u-column-indent

u-column-1

u-column-2

u-column-3

u-column-4

u-column-5

u-column-6

u-column-7

u-column-8

u-column-9

u-column-10

u-column-11

u-column-12

Order Utilities

u-order-first

u-order-first-desktop

u-order-first-tablet

u-order-last

u-order-last-desktop

u-order-last-tablet

Sizes

Gap Utilities

u-gap-inherit

u-gap-gutter

u-gap-0

u-gap-1

u-gap-2

u-gap-3

u-gap-4

u-gap-4_5

u-gap-5

u-gap-5_5

u-gap-6

u-gap-6_5

u-gap-7

u-gap-8

u-gap-9

u-gap-10

Row Gap Utilities

u-gap-row-inherit

u-gap-row-gutter

u-gap-row-0

u-gap-row-1

u-gap-row-2

u-gap-row-3

u-gap-row-4

u-gap-row-5

u-gap-row-6

u-gap-row-7

u-gap-row-8

Margin Top Utilities

u-mt-gutter

u-mt-text

u-mt-0

u-mt-1

u-mt-2

u-mt-3

u-mt-4

u-mt-5

u-mt-6

u-mt-7

u-mt-8

Margin Bottom Utilities

u-mb-gutter

u-mb-text

u-mb-0

u-mb-1

u-mb-2

u-mb-3

u-mb-4

u-mb-5

u-mb-6

u-mb-7

u-mb-8

Border Radius Utilities

u-radius-none

u-radius-inherit

u-radius-small

u-radius-main

u-radius-round

Miscellaneous

Display Utilities

u-display-block

u-display-inline-block

u-display-inline-flex

u-display-inline-grid

u-display-inline

u-display-none

u-hide-if-empty

u-hide-if-empty-cms

Overflow Utilities

u-overflow-visible

u-overflow-hidden

u-overflow-clip

u-overflow-scroll

u-overflow-auto

u-overflow-x-auto

u-overflow-y-auto

u-overflow-hidden-left

Z-Index Utilities

u-zindex-negative

u-zindex-0

u-zindex-unset

u-zindex-1

u-zindex-2

u-zindex-3

Position Utilities

u-position-static

u-position-relative

u-position-absolute

u-position-fixed

u-position-sticky

Other Utilities

u-btn-group

u-alignment-vertical

u-alignment-horizontal

u-margin-trim

u-pointer-on

u-pointer-off

u-min-height-screen

u-max-width-none

u-width-full

u-height-full

u-cover

u-cover-absolute

u-visual-wrap

u-container

u-container-small

u-container-full

u-sr-only

Typography

Heading Styles

Heading 120

Heading 80

Heading 72

Heading 64

Heading 56

Heading 48

Heading 40

Heading 32

Heading 24

Paragraph Styles

Label Styles

Weights

Line Clamp

Text Align

Text Transform

Text Wrap

Typography Elements

Heading

Color

Themes

Heading

Heading

Text Color

Flexbox

Horizontal Flex Utilities

Vertical Flex Utilities

Align Self Utilities

Align Items Utilities

Other Flex Utilities

Grid

Grid Utilities

Column Utilities

Order Utilities

Sizes

Gap Utilities

Row Gap Utilities

Margin Top Utilities

Margin Bottom Utilities

Border Radius Utilities

Miscellaneous

Display Utilities

Overflow Utilities

Z-Index Utilities

Position Utilities

Other Utilities

Components

Buttons

Icons

Global & Starter

Heading

Lorem ipsum dolor sit amet elit

Form