Typography

Heading Styles

Scale Factor

Altere o valor z-index

desktop Base Size

deskop scale ratio

mobile base size

mobile scale ratio

u-heading-style-display-xlg

Display X-Large

u-heading-style-display-lg

Display large

u-heading-style-h1

Heading Style h1

u-heading-style-h2

Heading Style h2

u-heading-style-h3

Heading Style h3

u-heading-style-h4

Heading Style h4

u-heading-style-h5

Heading Style h5

u-heading-style-h6

Heading Style h6

Subtitle Styles

u-subtitle-style-large

Heading

u-subtitle-style-medium

Heading

u-subtitle-style-small

Heading

Text Styles

Scale Factor

Altere o valor z-index

desktop Base Size

deskop scale ratio

Altere o valor z-index

desktop Base Size

deskop scale ratio

mobile base size

mobile scale ratio

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-text-style-xsmall

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

u-text-style-tiny

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

u-clear-text-style

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

overline Styles

u-overline-style-large

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

u-overline-style-main

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

u-overline-style-small

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

u-overline-style-xsmall

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

u-overline-style-tiny

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

Caption Styles

u-caption-style-main

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

u-caption-style-small

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

u-caption-style-xsmall

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-bold

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

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-3

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-4

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.

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.

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-inherit

Heading

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

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

Social Colors

u-whatsapp-text-color

Whatsapp

u-color-faded

Lorem ipsum dolor

Background Color

u-background-transparent

Lorem ipsum dolor

u-background-1

Lorem ipsum dolor

u-background-2

Lorem ipsum dolor

Flexbox Base

Flex Direction Utilities

u-flex-horizontal-wrap

u-flex-vertical-nowrap

u-flex-vertical-nowrap

u-flex-vertical-wrap

Align Items Utilities

u-align-items-variable

u-align-items-start

u-align-items-center

u-align-items-end

u-align-items-stretch

Align Self Utilities

u-align-self-variable

u-align-self-start

u-align-self-center

u-align-self-end

u-align-self-stretch

Justify Content Utilities

u-justify-content-variable

u-justify-content-start

u-justify-content-center

u-justify-content-end

u-justify-content-between

u-justify-content-around

Flex Basis Utilities

u-flex-horizontal-wrap

u-flex-shrink

u-flex-grow

u-flex-noshrink

Grid

Grid Utilities

u-grid-autofit

u-grid-autofill

u-grid-above

u-grid-below

u-grid-custom

u-grid-breakout

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-last

u-order-unset-above

u-order-unset-below

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-5

u-gap-6

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-auto

u-mt-gutter

u-mt-text

u-mt-heading

u-mt-heading

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

u-mt-9

u-mt-8

Margin Bottom Utilities

u-mb-auto

u-mb-gutter

u-mb-text

u-mb-heading

u-mb-subtitle

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

u-mb-9

u-mb-10

Border Radius Utilities

u-radius-none

u-radius-inherit

u-radius-small

u-radius-main

u-radius-round

Padding Dividers

u_padding_bottom_divider

u-radius-inherit

u-radius-small

u-radius-main

u-radius-round

Slide Columns Sizes

u-3-columns-slide

u-radius-small

u-radius-main

u-radius-round

Media Sizes

u-media-wrap-full

u-media-wrap-large

u-media-wrap-medium

u-media-wrap-small

u-radius-small

u-radius-main

u-radius-round

Aspect Ratio Utilities

u-ratio-2_76-1

u-ratio-5-2

u-ratio-21-9

u-ratio-2-1

u-ratio-16-9

u-ratio-16-10

u-ratio-3-2

u-ratio-4-3

u-ratio-1-1

u-ratio-3-4

u-ratio-2-3

u-ratio-9-16

u-ratio-1-2

Miscellaneous

Absolut Positions

u-float-left-top

u-float-left-top

u-float-right-top

u-float-left-bottom

u-float-right-bottom

Absolut Positions

u-float-left-top

u-float-left-top

u-float-right-top

u-float-left-bottom

u-float-right-bottom

Display Utilities

u-display-block

u-display-inline-block

u-display-inline-flex

u-display-inline-grid

u-display-inline

u-display-contents

u-display-none

Advanced Display Utilities

u-hide-if-empty

u-hide-if-empty-cms

u-hide-if-out-of-staging

Visível apenas no webflow

Resnponsive Display Utilities

u-tablet-hide

u-mobile-landscape-hide

u-mobile-hide

u-tablet-show

u-mobile-landscape-show

u-mobile-show

Overflow Utilities

u-overflow-visible

u-overflow-hidden

u-overflow-clip

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

CH Max Width Utilities

u-max-width-none

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

u-max-width-10ch

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

u-max-width-12ch

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

u-max-width-14ch

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

u-max-width-16ch

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

u-max-width-18ch

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

u-max-width-20ch

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

u-max-width-30ch

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

u-max-width-40ch

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

u-max-width-50ch

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

u-max-width-60ch

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

u-max-width-70ch

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

u-max-width-80ch

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

Max Widths

Max Width X Large

Max Width Large

Max Width Regular

Max Width Small

Max Width X Small

Max Width Utilities

Effects

u-light-filter

Other Utilities

u-all-unset-above

u-all-unset-below

u-text-trim-off

u-btn-group

u-griu-child-containd-flex

u-margin-inline-auto

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-large

u-container-small

u-container-xsmall

u-container-full

u-sr-only

u-slide-base-wrap

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.

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.

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.