Typography

Headings

h-display

Element

h1

Element

.h1

Element

h2

Element

.h2

Element

h3

Element

.h3

Element

h4

Element

.h4

Element

h5
Element
.h5

Element

h6
Element
.h6

Element

Paragraphs

.eyebrow

eyebrow

.label

label

.paragraph-xs

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

.paragraph-sm

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

.paragraph-md
Body
Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

.paragraph-lg

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

.paragraph-xl

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

All Ordered Lists
  1. Example Ordered List
  2. Example Ordered List
All Unordered Lists
  • Example Unordered List
  • Example Unordered List

Rich Texts

.rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote
<div>example code block here</div>

‍

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Colors

Headings

Swatch

u-bg-blue-50

Blue 50

u-bg-blue-100

Blue 100

u-bg-blue-200

Blue 200

u-bg-blue-300

Blue 300

u-bg-blue-400

Blue 400

u-bg-blue-500

Blue 500

u-bg-blue-600

Blue 600

u-bg-blue-700

Blue 700

u-bg-blue-800

Blue 800

u-bg-blue-900

Blue 900

Primary

u-bg-primary

Webflow

Secondary

u-bg-purple

Purple

u-bg-pink

Pink

u-bg-orange

Orange

u-bg-red

Red

u-bg-yellow

Yellow

u-bg-green

Green

Neutral

u-bg-white

White

u-bg-neutral-100

Neutral 100

u-bg-neutral-200

Neutral 200

u-bg-neutral-300

Neutral 300

u-bg-neutral-400

Neutral 400

u-bg-neutral-500

Neutral 500

u-bg-neutral-600

Neutral 600

u-bg-neutral-700

Neutral 700

u-bg-neutral-800

Neutral 800

u-bg-neutral-900

Neutral 900

u-bg-black

Black

Texts

Swatch

u-color-blue-50

Blue 50

Aa
u-color-blue-100

Blue 100

Aa
u-color-blue-200

Blue 200

Aa
u-color-blue-300

Blue 300

Aa
u-color-blue-400

Blue 400

Aa
u-color-blue-500

Blue 500

Aa
u-color-blue-600

Blue 600

Aa
u-color-blue-700

Blue 700

Aa
u-color-blue-800

Blue 800

Aa
u-color-blue-900

Blue 900

Aa

Primary

u-color-primary

Webflow

Aa

Secondary

u-color-purple

Purple

Aa
u-color-pink

Pink

Aa
u-color-orange

Orange

Aa
u-color-red

Red

Aa
u-color-yellow

Yellow

Aa
u-color-green

Green

Aa

Neutral

u-color-white

White

Aa
u-color-neutral-100

Neutral 100

Aa
u-color-neutral-200

Neutral 200

Aa
u-color-neutral-300

Neutral 300

Aa
u-color-neutral-400

Neutral 400

Aa
u-color-neutral-500

Neutral 500

Aa
u-color-neutral-600

Neutral 600

Aa
u-color-neutral-700

Neutral 700

Aa
u-color-neutral-800

Neutral 800

Aa
u-color-neutral-900

Neutral 900

Aa
u-color-black

Black

Aa

Theme

Mode

u-theme-inherit

Inherit

Aa
u-theme-base

Theme Base

Aa
u-theme-1

Theme 1

Aa
u-theme-2

Theme 2

Aa
u-theme-3

Theme 3

Aa
u-theme-4

Theme 4

Aa

Utilities

Texts

Font Family

u-font-primary

Primary Font

u-font-secondary

Secondary Font

u-font-tertiary

Tertiary Font

Font Weight

u-weight-light

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

u-weight-regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

u-weight-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

u-weight-semibold

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

u-weight-bold

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Alignment

u-align-inherit

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

u-align-start

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

u-align-end

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

u-align-center

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

u-align-justify

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Wrapping

u-text-wrap-balance

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

u-text-wrap-pretty

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

u-text-wrap-default

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Clamping

u-line-clamp-1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

u-line-clamp-2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

u-line-clamp-3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

u-line-clamp-4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

u-line-clamp-5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Helpers

u-color-inherit

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

u-color-accent

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

u-color-faded

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Display

u-display-none
display: none;
u-display-inline-block
display: inline-block;
u-display-inline
display: inline;
u-display-flex
display: flex;
u-display-inline-flex
display: inline-flex;
u-display-grid
display: grid;
u-display-inline-grid
display: grid;
display: inline-grid;
u-display-contents
display: contents;
u-display-block
display: block;

Helpers

u-pointer-on
pointer-events: auto;
u-pointer-off
pointer-events: none;
u-sr-only

Multiple Properties

u-fit-cover

Multiple Properties

u-grid

Multiple Properties

u-hide-tablet

Multiple Properties

u-hide-mobile

Multiple Properties

u-max-w-55ch

Multiple Properties