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

Headings

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

Body

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

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.

Color

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

Background

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

Text

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

Buttons

Button

Default

btn

Button

Secondary

btn

cc-secondary

Text

Text Link

All Links

Button

Default Light

btn

cc-light

btn-play

Arrows

btn-play

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.

Card

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

Layouth

Size

u-w-100

width: 100%;

u-h-100

height: 100%;

Margin

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;

Padding

Top

u-pt-0

padding-top: 0;

Botton

u-pb-0

padding-bottom: 0;

Full

u-p-0

padding: 0;

Overflow

u-overflow-hidden

overflow: hidden;

Pointer Events

u-clickable

pointe-events: auto;

u-no-clickable

pointe-events: none;

Display + position

u-d-none

display: none;

u-position-relative

position: relative;

u-z-index-1

z-index: 1;

Rounded Corners

u-class

Text

Modes

u-invert-theme

Change the global background and text color of all elements inherit to the parent.

Full Class Utilities

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

section

Container

container

Grid

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

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

Modifiers

u-nomax-md

max-width: none;
On tablet

u-nomax-sm

max-width: none;
On mobile landscape

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

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

Button 1 Button

hero-wrapper-1

//

F3 Framework Base

Button Text Button Text

Modal Trigger

Spacers

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