Style Guide

Typography

H1 Headings

Element

H2 Headings

Element

H3 Headings

Element

H4 Headings

Element

H5 Headings
Element
H6 Headings
Element
u-heading-1
Class
u-heading-2
Class
u-heading-3
Class
u-heading-4
Class
u-heading-5
Class
u-heading-6
Class
u-heading-display-1
Class
u-text-lg

On design 24px/38px

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

u-text-main

/ On design 16px/24px

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

u-text-sm

/ On design 14px/21px

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

u-text-meta

/ On design 14px/21px

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

paragraph

/ On design 16px/24px

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

u-link
Text Link
All Ordered Lists
  1. Example Ordered List
  2. Example Ordered List
All Unordered Lists
  • Example Unordered List
  • Example Unordered List

The next custom atributes are set at the ... embed as root variables.

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.

Heading

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.

Button Text

Heading

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.

Button Text

Components

Heading

Heading Component

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 Component

Primary (Default)

btn_main_component

Primary (Default)

btn

Secondary

btn
is-secondary

Ghost Invert

btn
is-ghost-invert

Primary Small

btn-sm

Text Link

All Links

Text Link

u-link

Icon Arrow Right

Icon Arrow Left

Icon Arrow Down

Icon Arrow Up

Icon Chevron Down

Icon Play

Icon Download

img-ratio-1
position: absolute;
left: 0%;
top: 0%;
right: 0%;
bottom: 0%;
width: 100%;
height: 105%;
object-fit: cover;

position: relative;
overflow: hidden;
aspect-ratio: 1/1;

img-ratio-2
position: absolute;
left: 0%;
top: 0%;
right: 0%;
bottom: 0%;
width: 100%;
height: 105%;
object-fit: cover;

position: relative;
overflow: hidden;
aspect-ratio: 16/9;

*Required

Thank you for your submission!

Oops! Something went wrong while submitting the form.
*Required

Thank you for your submission!

Oops! Something went wrong while submitting the form.
bg-acc-card

Default

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

Layout

u-container
u-grid-custom
u-grid-autofit
u-grid-12
u-grid-6
u-grid-4
u-grid-3
u-grid-2
u-column-custom
u-column-{number}
u-column-1 through u-column-12
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
u-column-13
u-column-full
u-order-first
u-order-first-desktop
u-order-first-tablet

Classes for a horizontal flexbox

u-hflex-between-bottom
u-hflex-between-top
u-hflex-between-center
u-hflex-between-stretch
u-hflex-left-bottom
u-hflex-left-top
u-hflex-left-center
u-hflex-left-stretch
u-hflex-right-bottom
u-hflex-right-top
u-hflex-right-center
u-hflex-right-stretch
u-hflex-center-bottom
u-hflex-center-top
u-hflex-center-center

Classes for a vertical flexbox

u-vflex-center-top
u-vflex-center-center
u-vflex-center-bottom
u-vflex-center-between
u-vflex-left-top
u-vflex-left-center
u-vflex-left-bottom
u-vflex-left-between
u-vflex-right-top
u-vflex-right-center
u-vflex-right-bottom
u-vflex-right-between
title-wrapper

//

Heading

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.

title-wrapper
cc-centered

//

Heading

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.

content-wrapper

//

Heading

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.

btn-wrapper

//

hero-wrapper-1

//

Global Top and Bottom padding

spacer-section_small
spacer-section_main
spacer-section_large
spacer-hero-1
spacer-content-xsmall
spacer-content-small
spacer-content-regular
spacer-content-medium
spacer-content-large
spacer-content-xlarge

Utilities

u-max-w-25
u-max-w-26
u-max-w-27
u-max-w-28
u-max-w-30
u-max-w-31
u-max-w-32
u-max-w-33
u-max-w-34
u-max-w-35
u-max-w-36
u-max-w-37
u-max-w-38
u-max-w-39
u-max-w-40
u-max-w-41
u-max-w-42
u-max-w-43
u-max-w-44
u-max-w-45
u-max-w-46
u-max-w-47
u-max-w-48
u-max-w-49
u-max-w-50
u-max-w-51
u-max-w-52
u-max-w-53
u-max-w-54
u-max-w-55
u-max-w-56
u-max-w-57
u-max-w-58
u-max-w-59
u-max-w-60
u-max-w-60
u-max-w-full
u-nomax-md
max-width: none;
On tablet
u-nomax-sm
max-width: none;
On mobile landscape
img-cover
position: absolute;
left: 0%;
top: 0%;
right: 0%;
bottom: 0%;
width: 100%;
height: 105%;
object-fit: cover;

link-cover
position: absolute;
left: 0%;
top: 0%;
right: 0%;
bottom: 0%;
width: 100%;
height: 100%;