Style Guide

This project is made with Flow base library
Modify the elements that already exist to adapt them to your own design.
All classes started with u-... are set in a embed

Follow this DOC

Flow base library Setup
- Method: Rems
- Design width: 1440px
- Max-width: 1920px

Typography

H1 Headings

Element

H2 Headings

Element

H3 Headings

Element

H4 Headings

Element

u-heading-fs1-ff2

/ On design 85px/85px

Heading 1
u-heading-fs2-ff2

// On desing 60px/68px

Heading 2
u-heading-fs3-ff2

// On desing 48px/56px

Heading 3
u-heading-fs4-ff2

// On desing 32px/40px

Heading 4
u-heading-h5

// On desing 32px/40px

Heading 4
u-paragraph-lg

On design 24px/38px

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

u-paragraph-md

On design 20px/30px

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-paragraph-sm

/ On design 14px/21px

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

u-meta
Lorem Ipsum
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.

Color

This colors are set in the color embed as root variables.

Dark 1

u-bg-dark-1

Dark 2

u-bg-dark-2

White

u-bg-light-1

Light Gray

u-bg-light-2

Accent 1

u-bg-accent-1
Aa

Dark 1

u-fc-dark-1
Aa

Dark 2

u-fc-dark-2
Aa

White

u-fc-light-1
Aa

Light Grey

u-fc-light-2
Aa

Primary

u-fc-accent-1

Components

Default

btn

Secondary

btn
cc-secondary

Text Link

All Links

Default Light

btn
cc-light

btn-play

btn-play

btn-play

btn-play

Arrows

btn-play
*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.

Default

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

This is some text inside of a div block.

Default

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

Utilities

u-w-100
width: 100%;
u-h-100
height: 100%;

Full

u-m-0
margin: 0px !important;

Left & Right

u-mlr-auto
margin-left:  auto;
margin-right: auto;

Bottom

u-mb-0
margin-bottom: 0px;
u-mb-1
margin-bottom: 1em;
u-mb-2
margin-bottom: 2em;

Top

u-mt-0
margin-top: 0px;
u-mt-1
margin-top: 1em;
u-mt-2
margin-top: 2em;
u-mt-auto
margin-top: auto;

Top

u-pt-0
padding-top: 0;

Botton

u-pb-0
padding-bottom: 0;

Full

u-p-0
padding: 0;
u-overflow-hidden
overflow: hidden;
u-clickable
pointe-events: auto;
u-no-clickable
pointe-events: none;
u-d-none
display: none;
u-position-relative
position: relative;
u-z-index-1
z-index: 1;
u-class
Text
u-invert-theme
Change the global background and text color of all elements inherit to the parent.
img-cover
position: absolute;
left: 0%;
top: 0%;
right: 0%;
bottom: 0%;
width: 100%;
height: 105%;
object-fit: cover;

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

Layout

section
container

Default gap is set in the spacing embed

grid-2-col
grid-4-col
grid-6-col
grid-12-col
grid-12-col--nogap
grid-custom-1
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-u-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-full
u-nomax-md
max-width: none;
On tablet
u-nomax-sm
max-width: none;
On mobile landscape
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

// gap 32px

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

// gap 8px

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

// gap 1rem

hero-wrapper-1

//

Global Top and Bottom padding

spacer-section-1

// On design Desktop: 80px

spacer-section-2

// On design Desktop: 120px

spacer-content-1

// On design Desktop: 80px

spacer-wrapper-1

// On design Desktop: 64px

spacer-wrapper-2

// On design Desktop: 96px

spacer-wrapper-3

// On design Desktop: 128px

spacer-wrapper-custom1