Styleguide

Typography

Fonts

General Sans

Heading

u-font-primary

General Sans

Body

u-font-secondary

Headings

H1 Headings

Heading

H2 Headings

Heading

H3 Headings

Heading

H4 Headings

Heading

H5 Headings
Heading
H6 Headings
Heading
H1

Class

H2

Class

H3

Class

H4

Class

H5

Class

H6

Class

Body

text-xxl

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

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

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.

paragraph
text-m

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

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

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.

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

Responsive text

text-xxl
sm-l

This text is 1.125em at 767px and below.

text-xxl
sm-m

This text is 1em at 767px and below.

text-xxl
sm-s

This text is 0.875em at 767px and below.

text-xxl
sm-xs

This text is 0.75em at 767px and below.

text-xxl
sm-mini

This text is 0.625em at 767px and below.

Font weight

Aa

Weight regular

weight-400
Aa

Weight medium

weight-500
Aa

Weight semibold

weight-600
Aa

Weight bold

weight-700

Colors

Background

Dark

u-bg-dark

White

u-bg-white

Text

Aa

Brand

text-orange
Aa

Dark

text-dark
Aa

White

text-white

Modes Element

Text fade

Aa

text-fade

u-mode-base
>
text-fade
Aa

text-fade

u-mode-base
>
text-fade

Modes

Aa

Base

u-mode-base
Aa

Invert

u-mode-invert

Utilities

Margin

Margin utilities

mt
Multiple properties
mb
Multiple properties

Margin sizes

mt
m-4
Multiple properties
mt
m-8
Multiple properties
mt
m-12
Multiple properties
mt
m-16
Multiple properties
mt
m-20
Multiple properties
mt
m-24
Multiple properties
mt
m-32
Multiple properties
mt
m-40
Multiple properties
mt
m-48
Multiple properties
mt
m-64
Multiple properties
mt
m-80
Multiple properties
mt
m-96
Multiple properties

Margin other

m-0
margin: 0;
mt-auto
margin-top: auto;
mb-auto
margin-bottom: auto;
m-center
margin: 0 auto;

Text

Alignement

text-center

text-align: center;

text-right

text-align: right;

text-left

text-align: left;

Clamping

u-text-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-text-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-text-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.

Wrapping

u-text-balance

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

u-text-pretty

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

Overflow

overflow-hidden

overflow: hidden;

overflow-visible

overflow: visible;

overflow-scroll

overflow: scroll;

Display & position

Display

u-none

display: none;

u-block

display: block;

u-flex

display: flex;

Positions

u-relative

position: relative;

u-sticky

position: sticky;

u-absolute

position: absolute;

Responsive modifiers

u-md-none

display: none; (Tablet down)

u-sm-none

display: none; (Mobile (L) down)

u-xs-none

display: none; (Mobile only)

u-md-block

display: block; (Tablet down)

u-sm-block

display: block; (Mobile (L) down)

u-xs-block

display: block; (Mobile only)

Size

w-full

width: 100%;

h-full

height: 100%;

h-screen

min-height: 100svh;

Aspect ratio

u-aspect-square

Multiple properties

u-aspect-16x9

Multiple properties

u-aspect-4x3

Multiple properties

Helpers

u-cover

Multiple properties

u-contain

Multiple properties

z-1

Multiple properties

z-2

Multiple properties

bg-wrap

Multiple properties

Icon

icon

Multiple properties

icon
cc-18

Multiple properties

icon
cc-20

Multiple properties

icon
cc-24

Multiple properties

Layout

Container

Container base

container

Container sizes

container
cc-1440
container
cc-1200
container
cc-980
container
cc-600
container
cc-400

Grid

Grid utilities

grid-custom
grid-breakout
grid-desktop
grid-tablet
grid-2
grid-3
grid-4
grid-autofit
grid-autofill

Columns utilities

col-custom
col-full
u-col-indent
col-1
col-2
col-3
col-4
col-5
col-6
col-7
col-8
col-9
col-10
col-11
col-12

Flex

Flex utilities

flex-col
flex-row
flex-wrap

Flex horizontales utilities

flex-row
justify-start
flex-row
justify-center
flex-row
justify-end
flex-row
justify-between
flex-row
around
flex-row
justify-evenly

Flex vertical utilities

flex-col
align-start
flex-col
align-center
flex-col
align-end
flex-col
align-strech

Gap utilities

flex-col
gap-4
flex-col
gap-8
flex-col
gap-12
flex-col
gap-16
flex-col
gap-20
flex-col
gap-24
flex-col
gap-32
flex-col
gap-40
flex-col
gap-48
flex-col
gap-64
flex-col
gap-80
flex-col
gap-96