The Stylebook

The Stylebook is your Style Guide that it will maintain the coherence of the design of your website and keep a uniform and homogeneous style, without breaking the image that you want to convey to the visitor.

All styles throughout the site start here. To respect cohesiveness, all changes need to be done here; on this page.

Typography

Text Styles

u-text-style-displayXL

Heading

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

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

u-line-clamp-3

u-line-clamp-4

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

Pallete

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

This is some text inside of a div block.

u-color-faded

Lorem ipsum dolor

This is some text inside of a div block.

u-color-brand

Lorem ipsum dolor

This is some text inside of a div block.

Background Color

u-background-transparent

Lorem ipsum dolor

u-background-1

Lorem ipsum dolor

u-background-2

Lorem ipsum dolor

u-background-blur

Lorem ipsum dolor

Structure

Section

[Section]

Container

Flexbox

Flex Direction Utilities

u-flex-horizontal-wrap

u-flex-vertical-nowrap

u-flex-horizontal-nowrap

u-flex-vertical-wrap

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

u-align-items-start

u-align-items-center

u-align-items-end

u-align-items-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

Other Flex Utilities

u-hflex-wrap

u-vflex-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

u-grid-column-2

u-grid-column-3

u-grid-column-4

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

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

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

Aspect Ratio Utilities

u-ratio-2-1

u-ratio-16-9

u-ratio-3-2

u-ratio-1-1

u-ratio-2-3

Miscellaneous

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

u-display-none-tab

u-display-none-mob

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

Max Width Utilities

u-max-width-none

u-max-width-10ch

u-max-width-12ch

u-max-width-14ch

u-max-width-16ch

u-max-width-18ch

u-max-width-20ch

u-max-width-30ch

u-max-width-40ch

u-max-width-50ch

u-max-width-60ch

u-max-width-70ch

u-max-width-80ch

Other Utilities

u-all-unset-above

u-all-unset-below

u-text-trim-off

u-btn-group

u-child-contain

u-margin-inline-auto

u-margin-trim

u-pointer-on

u-pointer-off

u-min-height-screen

u-min-100vh

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

u-threshold-medium

u-threshold-small

u-sr-only

u-responsive-horizontal-scroll

The Stylebook

Typography

Text Styles

Heading

Heading

Heading

Heading

Heading

Heading

Heading

Heading

Weights

Line Clamp

Alignment Modes

Text Transform

Text Wrap

Typography Elements

Heading

Color

Pallete

Themes

Heading

Heading

Heading

Text Color

Background Color

Structure

Section

Container

Flexbox

Flex Direction Utilities

Align Self Utilities

Align Items Utilities

Justify Content 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

Aspect Ratio Utilities

Miscellaneous

Display Utilities

Overflow Utilities

Z-Index Utilities

Position Utilities

Max Width Utilities

Other Utilities

Components

OpenGraph