Style Guide

Typography

Core Headings

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

Body

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.

link

Text Link

u-link

Text Link

All Ordered Lists

Example Ordered List
Example Ordered List

All Unordered Lists

Example Unordered List
Example Unordered List

Line Clamp

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.

Themes

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

Button Text

Primary (Default)

btn_main_component

Button

Primary (Default)

btn

Button

Secondary

btn

is-secondary

Button

Ghost Invert

btn

is-ghost-invert

Button

Primary Small

btn-sm

Text

Text Link

All Links

Text

Text Link

u-link

Icon Arrow Right

Icon Arrow Left

Icon Arrow Down

Icon Arrow Up

Icon Chevron Down

Icon Play

Icon Download

Icon Sizes

Image Ratios

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;

Forms

Thank you for your submission!

Oops! Something went wrong while submitting the form.

Thank you for your submission!

Oops! Something went wrong while submitting the form.

Cards

Default

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

Layout

Container

u-container

Grid

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

Flex

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

Wrappers

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

//

Button 1 Button 2

hero-wrapper-1

//

F3 Framework Base

Button Text Button Text

Modal Trigger

Spacers

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

Max Widths

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

Modifiers

u-nomax-md

max-width: none;
On tablet

u-nomax-sm

max-width: none;
On mobile landscape

Full Class Utilities

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%;