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

heading-0

/ On design 280px/188px/96px

Class
heading-1

/ On design 180px/122px/64px

Class
heading-2

// On desing 128/96/64px

Class
heading-3

// On desing 80/30px

Class
heading-4

// On desing 24px/

Class

Body

paragraph-lg

On design 41px/32.5px/24px

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

label-lg

On design 36px/30px/24px

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

paragraph-md

On design 32px/26px/20px

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

label-md

On design 16px/14px

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.

paragraph-sm

/ On design 24px/22px/20px

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

meta
Lorem Ipsum
link
Text Link
All Ordered Lists
  1. Example Ordered List
  2. 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

Light Gray

u-bg-light-1

Light Gray

u-bg-light-2

Accent 1

u-bg-accent-1

Accent 2

u-bg-accent-2

Gray 1

u-bg-gray-2

Gray 2

u-bg-gray-2

Text

Aa

Dark 1

u-fc-dark-1
Aa

Dark 2

u-fc-dark-2
Aa

Light Gray

u-fc-light-1
Aa

White

u-fc-light-2
Aa

Orange

u-fc-accent-1
Aa

Orange 2

u-fc-accent-2
Aa

Gray

u-fc-gray-2
Aa

Gray 2

u-fc-gray-2

Components

Buttons

Button

Default

btn
Button

Secondary

btn
cc-secondary
Text

Text Link

All Links
Button

Default Light

btn
cc-light
Button

Secondary Light

btn
cc-secondary
cc-light

Forms

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

Card

Image of waves.

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;
Image of waves.
img-aspect-1
Image of waves.
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-60
u-max-w-70
u-max-w-full

Modifiers

u-nomax-md
max-width: none;
On tablet
Image of waves.
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

//

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 1Button 2
hero-wrapper-1

//

F3 Framework Base

Button TextButton Text
Modal Trigger

Spacers

Global Top and Bottom padding

spacer-section-1

// On design Desktop: 200px / Tablet 150px / Mobile 100px

spacer-section-2

// On design Desktop: 100px/ Tablet 60px/ Mobile 30px

spacer-content-1

// On design Desktop: 82px/Tablet 56px/Mobile 30px

spacer-content-2

// On design Desktop: 64px/Tablet 40px/Mobile 16px

spacer-wrapper-1

// On design Desktop: 64px

spacer-wrapper-2

// On design Desktop: 96px

spacer-wrapper-3

// On design Desktop: 128px

spacer-wrapper-custom1