Headings

Heading 1

heading-h1

HTML H1

Heading 1

Heading 2

heading-h2

HTML H2

Heading 2

Heading 3

heading-h3

HTML H3

Heading 3

Heading 4

heading-h4

HTML H4

Heading 4

Heading 5

heading-h5

HTML H5

Heading 5

Heading 6

heading-h6

HTML H6

Heading 6

Text

All Links

Common Link

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.

text-title-1

Title 1

text-title-2

Title 2

text-title-3

Title 3

text-body-1

Body 1

text-body-2

Body 2

text-body-3

Body 3 | Body Default Size

text-body-4

Body 4

text-body-5

Body 5

text-overline-1

Overline 1

text-overline-2

Overline 2

Rich text

u-richtext

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

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

Font Family

u-font-primary

Inter

u-font-secondary

Chivo Mono

Font Weight

u-weight-300

Font Weight Light [300]

u-weight-400

Font Weight Regular [400]

u-weight-500

Font Weight Medium [500]

Colors

u-color-primary-green-dark

Color Primary Green Dark

u-color-accent-orange-light

Color Accent Orange Light

u-color-accent-orange-dark

Color Accent Orange Dark

u-color-secondary-green-lighter

Color Secondary Green-Lighter

u-color-neutral-white

Color Neutral White

Background

u-bg-secondary-green-light

u-bg-primary-green-darkest

u-bg-accent-blue-dark

u-bg-neutral-gray-lightest

u-bg-neutral-white

u-bg-hero

Others

u-text-style-type-square

Text Style Type Square

u-text-wrap-balance

Text Wrap Balance

u-text-wrap-pretty

Text Wrap Pretty

u-text-uppercase

Uppercase

u-overflow-hidden

Overflow Hidden

u-select-none

User Select None

u-position-relative

Position Relative

u-position-absolute

Position Absolute

u-z-n1

Z-Index (-1)

u-isolation-isolate

Isolation Isolate (Create stacking context)

u-text-center

Text Align Center

u-margin-top-auto

Margin Top Auto

u-margin-inline-auto

Margin Left & Right Auto

u-width-full

width 100%

u-height-stretch

Height Stretch

u-display-flex

Display Flex

u-display-grid

Display Grid

u-display-contents

Display Contents

u-hide

Display None

u-hide_tablet

Display None on Tablet Breakpoint

u-flex-wrap

Flex Wrap

u-flex-direction-column

Flex Direction Column

u-flex-shrink-0

Flex Shrink 0

u-align-items-start

Align Items Start

u-align-items-center

Align Items Center

u-align-items-end

Align Items End

u-align-content-start

Align Content Start

u-justify-content-between

Justify Content Space Between

u-justify-content-center

Justify Content Center

u-place-items-center

Place Items Center

u-justify-items-center

Justify Items Center

sr-only

Screen Readers Only

u-list-unstyled

Unstyled list

u-blockquote-unstyled

Unstyled Block Quote

u-line-clamp

Show few lines from long sentence. Default lines value is 3. Want to modify! Assign a different value on css custom property (--_line-length). 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-selection-element

Selection Element

u-pattern-line

Line Pattern

u-pattern-square

Square Pattern

u-border-line-inline

Border Line Inline

u-border-line-outset-block

Border Line Outset Block [Top & Bottom]

u-border-line-outset-start

Border Line Outset Start [Top]

u-border-line-outset-end

Border Line Outset End [Bottom]

u-ratio-1

Aspect Ratio 1

u-grid-auto-2-column-layout

Auto 2 Column Grid layout [Each minimum 352px - 420px]

u-grid-auto-3-column-layout

Auto 3 Column Grid layout [Each minimum 336px]

u-cover

Spacing

u-spacing-inline

Spacing Inline [Left & Right] (16px)

u-spacing-inline-lg

Spacing Inline [Left & Right] (20px)

u-spacing-block

Spacing Block [Top & Bottom]

u-spacing-block

cc-bottom-0

Spacing Block [Top]

u-spacing-block

cc-top-0

Spacing Block [Bottom]

u-spacing-block-sm

Spacing Block Small [Top & Bottom]

u-spacing-block-sm

cc-bottom-0

Spacing Block Small [Top]

u-spacing-block-sm

cc-top-0

Spacing Block Small [Bottom]

u-section-header-spacing-block-end

Section Header Spacing Block End

Components

Button

cc-primary

cc-secondary

Book Consultation Submit Project Request

Selection Badge

Design and Webflow Agency

Decoration Star Icon

Decoration Inverted Corner

Style Guide Badge

cc-class

cc-tag

cc-component

cc-attribute

Style Guide Badge Component

Class Name

Tag Name

Component Name

Attribute Name

Class

Tag

Component

Attribute