Flowmatic Styleguide - Lite

Help you learn Webflow, web design, web development, and much more.

customization

Global styles

Global style

Structure of the page

Classes and structure

page-wrapper

main-wrapper

Structure of the components

Containers

container

padding--0

Container--size

container--infinite

max-width: 160rem; 2560px
margin-right: auto;
margin-left: auto;

container--XL-90rem-1440px

max-width: 90rem;
margin-right: auto;
margin-left: auto;

container--L-80rem-1280px

max-width: 80rem;
margin-right: auto;
margin-left: auto;

container--M-64rem-1024px

max-width: 64rem;
margin-right: auto;
margin-left: auto;

container--S-48rem-768px

max-width: 48rem;
margin-right: auto;
margin-left: auto;

container--XS-32rem-512px

max-width: 32rem;
margin-right: auto;
margin-left: auto;

To see the classes, click here set sizing on grow

container--infinite

container--XL-90rem-1440px

container--L-80rem-1280px

container--M-64rem-1024px

container--S-48rem-768px

container--XS-32rem-512px

Strategy to Spacing

Spacing with spacers

Spacer classe

spacer

Auto spacers

spacer

auto-3XS

height: 0.5rem;

spacer

auto-2XS

height: 1rem;

spacer

auto-XS

height: 1.5rem;

spacer

auto-S

height: 2rem;

spacer

auto-M

height: 2.5rem;

height: 2.25rem;

spacer

auto-L

height: 3rem;

height: 2.5rem;

spacer

auto-XL

height: 4rem;

height: 3rem;

spacer

auto-2XL

height: 6rem;

height: 4rem;

height: 3.5rem;

spacer

auto-3XL

height: 10rem;

height: 6rem;

height: 4rem;

To see the classes, click here set sizing on grow

Element spacers

spacer

hero--section

height: 6rem;

height: 5rem;

height: 3rem;

spacer

H2--section

height: 5rem;

height: 4rem;

height: 2rem;

To see the classes, click here set sizing on grow

Height spacers

h--0.5rem | 8px

height: 0.5rem;

h--1rem | 16px

height: 1rem;

h--1.5rem | 24px

height: 1.5rem;

h--2rem | 32px

height: 2rem;

h--2.5rem | 40px

height: 2.5rem;

h--3rem | 48px

height: 3rem;

h--4rem | 64px

height: 4rem;

h--5rem | 80px

height: 5rem;

h--8rem | 128px

height: 8rem;

h--15rem | 240px

height: 15rem;

To see the classes, click here set sizing on grow

h-spacers (general)

h-spacers: tablet

h-spacers: mobile

Top+bottom spacing

top+bottom__spacing--XL

10rem | 160px

8rem | 128px

6 rem | 96px

top+bottom__spacing--L

8rem | 128px

6rem | 96px

4 rem | 64px

top+bottom__spacing--M

5rem | 80px

4rem | 64px

3rem | 48px

top+bottom__spacing--S

3rem | 48px

0.5rem | 8px

top+bottom__spacing--XS

1rem | 16px

0.5rem | 8px

top+bottom__spacing--0

To see the classes, click here set sizing on grow

top+bottom__spacing--XL

top+bottom__spacing--L

top+bottom__spacing--M

top+bottom__spacing--S

top+bottom__spacing--XS

top+bottom__spacing--0

Spacing

padding

padding-size

padding--0.5rem | 8px

padding: 0.5rem;

padding--1rem | 16px

padding: 1rem;

padding--1.5rem | 24px

padding: 1.5rem;

padding--2rem | 32px

padding: 2rem;

padding--2.5rem | 40px

padding: 2.5rem;

padding--3rem | 48px

padding: 3rem;

padding--4rem | 64px

padding: 4rem;

padding--5rem | 80px

padding: 5rem;

padding--8rem | 128px

padding: 8rem;

padding--0

padding: 0rem;

padding--custom-1

padding: custom;

padding--custom-2

padding: custom;

padding--custom-3

padding: custom;

To see the classes, click here set sizing on grow

padding--8rem | 128px

padding--5rem | 80px

padding--4rem | 64px

padding--3rem | 48px

padding--2.5rem | 40px

padding--2rem | 32px

padding--1.5rem | 24px

padding--1rem | 16px

padding--0.5rem | 8px

padding--custom1

padding--custom2

padding--custom3

padding--0

padding-direction

padding-top

padding-right: 0rem;
padding-bottom: 0rem;
padding-left: 0rem;

padding-bottom

padding-right: 0rem;
padding-bottom: 0rem;
padding-left: 0rem;

padding-top+bottom

padding-right: 0rem;
padding-left: 0rem;

padding-right

padding-top: 0rem;
padding-bottom: 0rem;
padding-left: 0rem;

padding-left

padding-top: 0rem;
padding-right: 0rem;
padding-bottom: 0rem;

padding-right+left

padding-top: 0rem;
padding-bottom: 0rem;

To see the classes, click here set sizing on grow

padding-top

padding-bottom

padding-top+bottom

padding-right

padding-left

padding-right+left

Spacing

margin

margin-size

margin--0.5rem | 8px

margin: 0.5rem;

margin--1rem | 16px

margin: 1rem;

margin--1.5rem | 24px

margin: 1.5rem;

margin--2rem | 32px

margin: 2rem;

margin--2.5rem | 40px

margin: 2.5rem;

margin--3rem | 48px

margin: 3rem;

margin--4rem | 64px

margin: 4rem;

margin--5rem | 80px

margin: 5rem;

margin--8rem | 128px

margin: 8rem;

margin--0

margin: 0rem;

margin--custom-1

margin: custom;

margin--custom-2

margin: custom;

margin--custom-3

margin: custom;

To see the classes, click here set sizing on grow

margin--8rem | 128px

margin--5rem | 80px

margin--4rem | 64px

margin--3rem | 48px

margin-2.5rem-40px

margin--2rem | 32px

margin--1.5rem | 24px

margin--1rem | 16px

margin--0.5rem | 8px

margin--custom-1

margin--custom-2

margin--custom-3

margin--0

margin-direction

margin-top

margin-right: 0rem;
margin-bottom: 0rem;
margin-left: 0rem;

margin-bottom

margin-right: 0rem;
margin-bottom: 0rem;
margin-left: 0rem;

margin-top+bottom

margin-right: 0rem;
margin-left: 0rem;

margin-right

margin-top: 0rem;
margin-bottom: 0rem;
margin-left: 0rem;

margin-left

margin-top: 0rem;
margin-right: 0rem;
margin-bottom: 0rem;

margin-right+left

margin-top: 0rem;
margin-bottom: 0rem;

To see the classes, click here set sizing on grow

margin-top

margin-bottom

margin-top+bottom

margin-right

margin-left

margin-right+left

sizing

height

Height in rem | px

h--0

height: 0rem;

h--0.5rem | 8px

height: 0.5rem;

h--1rem | 16px

height: 1rem;

h--1.5rem | 24px

height: 1.5rem;

h--2rem | 32px

height: 2rem;

h--2.5rem | 40px

height: 2.5rem;

h--3rem | 48px

height: 3rem;

h--4rem | 64px

height: 4rem;

h--5rem | 80px

height: 5rem;

h--8rem | 128px

height: 8rem;

h--15rem | 240px

height: 15rem;

h--24rem | 384px

height: 24rem;

To see the classes, click here set sizing on grow

h-size (general)

h-size: tablet

h-size: mobile

Height in others unities

h--auto

height: 0.5rem;

h--20%

height: 20%;

h--25%

height: 25%;

h--33%

height: 33.333333%;

h--40%

height: 40%;

h--50%

height: 50%;

h--60%

height: 60%;

h--66%

height: 66.666666%;

h--75%

height: 75%;

h--80%

height: 80%;

h--100%

height: 100%;

h--100vh

height: 100vh;

h--50vh

height: 50vh;

To see the classes, click here set sizing on grow

h-size (general)

h-size: tablet

h-size: mobile

sizing

min-height

min-h--0

min-height: 0px;

min-h--0.5rem | 8px

min-height: 0.5rem;

min-h--1rem | 16px

min-height: 1rem;

min-h--1.5rem | 24px

min-height: 1.5rem;

min-h--2rem | 32px

min-height: 2rem;

min-h--2.5rem | 40px

min-height: 2.5rem;

min-h--3rem | 48px

min-height: 3rem;

min-h--4rem | 64px

min-height: 4rem;

min-h--5rem | 80px

min-height: 5rem;

min-h--8rem | 128px

min-height: 8rem;

min-h--15rem | 240px

min-height: 15rem;

min-h--20%

min-height: 20%;

min-h--25%

min-height: 25%;

min-h--33%

min-height: 33.333333%;

min-h--40%

min-height: 40%;

min-h--50%

min-height: 50%;

min-h--60%

min-height: 60%;

min-h--66%

min-height: 66.666666%;

min-h--75%

min-height: 75%;

min-h--80%

min-height: 80%;

min-h--100%

min-height: 100%;

min-h--20vh

min-height: 20vh;

min-h--25vh

min-height: 25vh;

min-h--33vh

min-height: 33vh;

min-h--40vh

min-height: 40vh;

min-h--50vh

min-height: 50vh;

min-h--60vh

min-height: 60vh;

min-h--66vh

min-height: 66vh;

min-h--75vh

min-height: 75vh;

min-h--80vh

min-height: 80vh;

min-h--100vh

min-height: 100vh;

To see the classes, click here set sizing on grow

min-h-size (general)

min-h-size: tablet

min-h-size: mobile

sizing

max-height

Max Height in rem | px

max-h--0

max-height: 0px;

max-h--0.5rem | 8px

max-height: 0.5rem;

max-h--1rem | 16px

max-height: 1rem;

max-h--1.5rem | 24px

max-height: 1.5rem;

max-h--2rem | 32px

max-height: 2rem;

max-h--2.5rem | 40px

max-height: 2.5rem;

max-h--3rem | 48px

max-height: 3rem;

max-h--4rem | 64px

max-height: 4rem;

max-h--5rem | 80px

max-height: 5rem;

max-h--8rem | 100px

max-height: 8rem;

max-h--15rem | 240px

max-height: 15rem;

max-h--1px

max-height: 1px;

max-h--100%

max-height: 100%;

max-h--100vh

max-height: 100vh;

To see the classes, click here set sizing on grow

max-h-size (general)

max-h-size: tablet

max-h-size: mobile

sizing

width

Width in rem | px

w--0.5rem | 8px

width: 0.5rem;

w--1rem | 16px

width: 1rem;

w--1.5rem | 24px

width: 1.5rem;

w--2rem | 32px

width: 2rem;

w--2.5rem | 40px

width: 2.5rem;

w--3rem | 48px

width: 3rem;

w--4rem | 64px

width: 4rem;

w--5rem | 80px

width: 5rem;

w--8rem | 128px

width: 8rem;

w--15rem | 240px

width: 15rem;

w--24rem | 384px

width: 24rem;

w--45rem | 720px

width: 45rem;

To see the classes, click here set sizing on grow

w-size (general)

w-size: tablet

w-size: mobile

Width in vh and %

w--auto

width: auto;

w--10%

width: 10%;

w--20%

width: 20%;

w--25%

width: 25%;

w--30%

width: 30%;

w--33%

width: 33.333333%;

w--40%

width: 40%;

w--50%

width: 50%;

w--60%

width: 60%;

w--66%

width: 66.666666%;

w--70%

width: 70%;

w--75%

width: 75%;

w--80%

width: 80%;

w--90%

width: 90%;

w--100%

width: 100%;

w--100vw

width: 100vw;

w--50vw

width: 50vw;

To see the classes, click here set sizing on grow

w-size (general)

w-size: tablet

w-size: mobile

sizing

min-width

min-w--0

min-width: 0px;

min-w--100%

min-width: 100%;

min-w--100vw

min-width: 100vw;

min-w--20vw

min-width: 20vw;

min-w--25vw

min-width: 25vw;

min-w--33vw

min-width: 33vw;

min-w--40vw

min-width: 40vw;

min-w--50vw

min-width: 50vw;

min-w--60vw

min-width: 60vw;

min-w--66vw

min-width: 66vw;

min-w--75vw

min-width: 75vw;

min-w--80vw

min-width: 80vw;

min-w--100vw

min-width: 100vw;

To see the classes, click here set sizing on grow

sizing

max-width

max-w--XL-90rem | 1440px

max-width: 90rem;

max-w--L-80rem | 1280px

max-width: 80rem;

max-w--M-64rem | 1024px

max-width: 64rem;

max-w--S-48rem | 768px

max-width: 48rem;

max-w--XS-32rem | 512px

max-width: 32rem;

max-w--24rem | 384px

max-width: 24rem;

max-w--15rem | 240px

max-width: 15rem;

max-w--0

max-width: 0px;

max-w--1px

max-width: 1px;

max-w--100%

max-width: 100%;

max-w--100vw

max-width: 100vw;

max-w--60ch

max-width: 60ch;

To see the classes, click here set sizing on grow

Typography

headings and heading-style

All H1 Headings

heading__style--h1

font-size: 3.5rem|56px
line-height: 1.1-
font-weight: 700;

font-size: 2.5rem|40px
line-height: 1.1-
font-weight: 700;

All H2 Headings

heading__style--h2

font-size: 2.5rem|40px
line-height: 1.2-
font-weight: 700;

font-size: 2rem|32px
line-height: 1.2-
font-weight: 700;

All H3 Headings

heading__style--h3

font-size: 2rem|32px
line-height: 1.2-
font-weight: 700;

font-size: 1.5rem|24px
line-height: 1.2-
font-weight: 700;

All H4 Headings

heading__style--h4

font-size: 1.5rem|24px
line-height: 1.4-
font-weight: 500;

font-size: 1.25rem|20px
line-height: 1.4-
font-weight: 500;

All H5 Headings

heading__style--h5

font-size: 1.25rem|20px
line-height: 1.5-
font-weight: 500;

font-size: 1rem|16px
line-height: 1.5-
font-weight: 500;

All H6 Headings

heading__style--h6

font-size: 1rem|16px
line-height: 1.5-
font-weight: 500;

To see the classes, click here set sizing on grow

All H1 Headings

heading__style--h1

Whiff of freshly brewed coffee, a sensory delight, mesmerizes both young and old.

All H2 Headings

heading__style--h2

Whiff of freshly brewed coffee, a sensory delight, mesmerizes both young and old.

All H3 Headings

heading__style--h3

Whiff of freshly brewed coffee, a sensory delight, mesmerizes both young and old.

All H4 Headings

heading__style--h4

Whiff of freshly brewed coffee, a sensory delight, mesmerizes both young and old.

All H5 Headings

heading__style--h5

Whiff of freshly brewed coffee, a sensory delight, mesmerizes both young and old.

All H6 Headings

heading__style--h6

Whiff of freshly brewed coffee, a sensory delight, mesmerizes both young and old.

Typography

Texts

Paragraphs

All Paragraphs

font-size: 1rem;
line-height: 1.5;
color: var(--swatch_text);

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

text__size--XL

font-size: 1.5rem; 24px
line-height: 1.5-

Lorem ipsum dolor

text__size--L

font-size: 1.25rem; 20px
line-height: 1.5-

Lorem ipsum dolor

text__size--M

font-size: 1rem; 16px
line-height: 1.5-

Lorem ipsum dolor

text__size--S

font-size: 0.875rem; 14px
line-height: 1.5-

Lorem ipsum dolor

text__size--XS

font-size: 0.75rem; 12px
line-height: 1.5-

Lorem ipsum dolor

Text style

text__style--italic

font-style: italic;

Lorem ipsum dolor

text__style--allcaps

text-transform: uppercase;

Lorem ipsum dolor

text__style--striketrought

text-decoration: line-through;

Lorem ipsum dolor

text__style--underline

text-decoration: underline;

Lorem ipsum dolor

tagline

color: var(--swatch_accent);
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;

Lorem ipsum dolor

text__style--custom1

to custom

Lorem ipsum dolor

text__style--custom2

to custom

Lorem ipsum dolor

text__style--custom3

to custom

Lorem ipsum dolor

Text weight

text__weight--900-black

font-weight: 900;

Lorem ipsum dolor

text__weight--800-extrabold

font-weight: 800;

Lorem ipsum dolor

text__weight--700-bold

font-weight: 700;

Lorem ipsum dolor

text__weight--600-semibold

font-weight: 600;

Lorem ipsum dolor

text__weight--500-medium

font-weight: 500;

Lorem ipsum dolor

text__weight--400-normal

font-weight: 400;

Lorem ipsum dolor

text__weight--300-light

font-weight: 300;

Lorem ipsum dolor

text__weight--200-extralight

font-weight: 200;

Lorem ipsum dolor

text__weight--100-thin

font-weight: 100;

Lorem ipsum dolor

Text direction

text__align--left

text-align: left;

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text__align--center

text-align: center;

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text__align--right

text-align: right;

Lorem ipsum dolorsit amet, consectetur adipiscing elit.

text__align--justify

text-align: justify;

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text color

text__color--text

color: var(--swatch_text);

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text__color--grey-950

color: var(--swatch_grey-950);

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text__color--grey-900

color: var(--swatch_grey-900);

Lorem ipsum dolorsit amet, consectetur adipiscing elit.

text__color--grey-800

color: var(--swatch_grey-800);

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text__color--grey-700

color: var(--swatch_grey-700);

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text__color--grey-600

color: var(--swatch_grey-600);

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text__color--grey-500

color: var(--swatch_grey-500);

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text__color--grey-400

color: var(--swatch_grey-400);

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text__color--grey-300

color: var(--swatch_grey-300);

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text__color--grey-200

color: var(--swatch_grey-200);

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text__color--grey-100

color: var(--swatch_grey-100);

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text__color--grey-50

color: var(--swatch_grey-50);

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text__color--grey-25

color: var(--swatch_grey-25);

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text__color--white

color: var(--swatch_white);

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text__color--green

color: var(--swatch_green);

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text__color--red

color: var(--swatch_red);

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

items

Buttons

Simples buttons

secondary

small

Button Text

tertiary

Button Text

tertiary

small

Button Text

text

Button Text

text

Dropdown buttons

button

small

secondary

small

tertiary

small

text

Dropdown position

Dropdown icon

dropdown__icon

hide

dropdown__icon

hide--desktop

dropdown__icon

hide--tablet

dropdown__icon

hide--mobile-landscape+down

Items

Icons

Fixed size, square and round icons

icon-small__1x1--16px

width: 16px;
height: 16px;

icon-small__1x1--24px

width: 24px;
height: 24px;

icon-medium__1x1--32px

width: 32px;
height: 32px;

icon-medium__1x1--48px

width: 48px;
height: 48px;

icon-large__1x1--80px

width: 80px;
height: 80px;

icon-large__1x1--96px

width: 96px;
height: 96px;

Others icons

icon-small--16px

width: auto;
height: 16px;

icon-small--24px

width: auto;
height: 24px;

icon-medium--32px

width: auto;
height: 32px;

icon-medium--48px

width: auto;
height: 48px;

icon-large--80px

width: auto;
height: 80px;

icon-large--96px

width: auto;
height: 96px;

Embedded code icon

Items

Image

Image wrapper

image__wrap

Image

Components

Radius

radius--XS

radius: 0.25rem;

radius--S

radius: 0.5rem;

radius--M

radius: 1rem;

radius--L

radius: 1.5rem;

radius--XL

radius: 2rem;

radius--0

radius: 0rem;

Additional responsive classes

tab__radius--0

radius: 0rem;

mob__radius--0

radius: 0rem;

Components

Border

border-right

border-right: 1px solid rgb(213, 213, 213);

border-left

border-left: 1px solid rgb(213, 213, 213);

border-right+left

border-right: 1px solid rgb(213, 213, 213);border-left: 1px solid rgb(213, 213, 213);

border-top

border-top: 1px solid rgb(213, 213, 213);

border-bottom

border-bottom: 1px solid rgb(213, 213, 213);

border-top+bottom

border-top: 1px solid rgb(213, 213, 213);border-bottom: 1px solid rgb(213, 213, 213);

border-all

border-style: solid; border-width: 1px; border-color: rgb(213, 213, 213);

Components

Box shadow

box-sahdow--XS

box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 8px 1px;

box-sahdow--S

box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 6px 2px;

box-sahdow--M

box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 8px 3px;

box-sahdow--L

box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px 4px, rgba(0, 0, 0, 0.1) 0px 2px 3px 0px;

box-sahdow--XL

box-shadow: rgba(0, 0, 0, 0.1) 0px 6px 12px 7px, rgba(0, 0, 0, 0.1) 0px 4px 4px 0px;

Components

Colors

Grey

AAA

#f8f8f8

AAA

#f0f0f0

AAA

#e2e2e2

AAA

#c4c4c4

5.49

#a7a7a7

3.50

#898989

5.25

#6c6c6c

6.69

#5c5c5c

AAA

#4c4c4c

AAA

#3b3b3b

AAA

#2b2b2b

AAA

#202020

Red

AAA

#FFF6F6

AAA

#FEECEC

AAA

#FFD8D8

AAA

#FFB2B2

5.83

#F59090

4.41

#ED6D6D

3.91

#E34B4B

4.90

#CD3B3B

AAA

#B22D2D

AAA

#951F1F

AAA

#731414

AAA

#5F0B0B

Orange1

AAA

#FFF8F5

AAA

#fff1e9

AAA

#ffe3d4

AAA

#ffc8a8

AAA

#fcad81

5.87

#f99358

4.81

#f67830

3.62

#d96421

5.10

#b2521b

AAA

#8d4013

AAA

#682e0c

AAA

#512207

Orange2

AAA

#fffaf3

AAA

#fff5e8

AAA

#ffecce

AAA

#ffd89d

AAA

#fbc674

AAA

#f9b349

6.24

#f5a01f

4.59

#d38815

4.12

#ad7012

6.06

#89580d

AAA

#644008

AAA

#4c3004

Yellow

AAA

#fffdf3

AAA

#fffbe7

AAA

#fff7d0

AAA

#fff0a1

AAA

#ffe871

AAA

#ffe142

AAA

#ffd913

6.81

#dab80d

4.66

#b3980a

4.40

#8d7707

AAA

#675705

AAA

#4e4103

Green1

AAA

#fdfff0

AAA

#fdffdf

AAA

#faffbb

AAA

#f5ff7e

AAA

#edf864

AAA

#e6f446

AAA

#deed2d

AAA

#beca1e

4.99

#9ba71a

4.13

#7a8313

6.77

#59600c

AAA

#434807

Green2

AAA

#f9fef1

AAA

#f3fee1

AAA

#e5ffbd

AAA

#ccff7f

AAA

#bcf16c

AAA

#abe750

AAA

#9bd93d

5.71

#82bb2a

3.98

#6b9b22

5.04

#7a8313

AAA

#3c5910

AAA

#2d4409

Green3

AAA

#f3fef5

AAA

#e7fee9

AAA

#c8ffd0

AAA

#94ffa0

AAA

#80e88b

AAA

#66d771

5.69

#52c05e

4.50

#38ac45

4.16

#2e8e39

6.06

#22712b

AAA

#15551d

AAA

#0c4211

Blue1

AAA

#f3fefb

AAA

#e2fefa

AAA

#c2fff7

AAA

#88ffed

AAA

#71eeda

AAA

#53e1ca

6.79

#3ccfb8

5.15

#29b59e

3.69

#229583

5.49

#197667

AAA

#10574c

AAA

#094239

Blue2

AAA

#f4fcfe

AAA

#e7f9fe

AAA

#caf4ff

AAA

#98e8ff

AAA

#7cd3ee

6.43

#5ac2e1

5.12

#3daecf

3.95

#2a98b8

4.71

#227d98

6.77

#196379

AAA

#104959

AAA

#093745

Blue3

AAA

#f5faff

AAA

#e9f6fe

AAA

#d3ecff

AAA

#a6daff

AAA

#83c6f5

5.64

#5db1ed

4.42

#3a9ce2

3.83

#2788cc

5.38

#216fa8

AAA

#185886

AAA

#0f4064

AAA

#08314e

Blue4

AAA

#f5f8ff

AAA

#ecf1ff

AAA

#d7e4ff

AAA

#b0c8ff

5.93

#8aadfa

4.36

#6491f7

4.14

#3e76f2

5.32

#3164d8

6.95

#2453ba

AAA

#194299

AAA

#102f76

AAA

#092361

Purple1

AAA

#f7f7ff

AAA

#efefff

AAA

#dfdfff

AAA

#bebeff

5.50

#9d9ff8

3.95

#7e80f4

4.80

#5e60ed

6.07

#4f51d4

AAA

#4041b8

AAA

#3031a1

AAA

#1f1f97

AAA

#0f12a3

purple2

AAA

#f8f6ff

AAA

#f2edfe

AAA

#e4dcff

AAA

#cbb8ff

5.40

#b097f5

3.80

#9575ed

4.98

#7a54e4

6.33

#6944ce

AAA

#5737b3

AAA

#46269e

AAA

#36168e

AAA

#2b0c78

Purple3

AAA

#faf6fe

AAA

#f8ecfe

AAA

#f0d8ff

AAA

#e1b1ff

5.57

#cc91ef

4.00

#b76ee4

4.61

#a14ed4

5.80

#903cc3

AAA

#7b2ea9

AAA

#65208f

AAA

#4c146f

AAA

#3c0b5c

Pink1

AAA

#fef5fd

AAA

#feebfb

AAA

#ffd6fc

AAA

#ffadf7

6.08

#ef8ee6

4.67

#e46cd8

3.68

#d44ec7

6.60

#c338b6

6.14

#a52c99

AAA

#85207a

AAA

#65145e

AAA

#510b4b

Pink2

AAA

#fef5f9

AAA

#feebf5

AAA

#ffd7eb

AAA

#ffafd5

5.87

#ef8fbe

4.42

#e46da6

3.97

#d44e8f

4.97

#c33a7d

6.51

#a82c68

AAA

#892053

AAA

#69143d

AAA

#550b2f

Pink3

AAA

#fff7f8

AAA

#feeef2

AAA

#ffdee3

AAA

#ffbbc8

6.53

#f59eae

5.07

#ed7f94

3.98

#e4627a

4.31

#ce4d66

5.70

#b33c51

AAA

#9a283d

AAA

#78192c

AAA

#630e20

Custom

primary-absolute

primary-light-absolute

primary-dark-absolute

secondary-absolute

secondary-light-absolute

secondary-dark-absolute

accent-absolute

background-absolute

Components

Tables

An organized grid of information, the website table brings order to data. It presents details in a structured and easily scannable format, ensuring quick access to key insights.

Auto

Coffee Blend A

$9.99

In Stock

Coffee Blend B

$12.99

Out of Stock

With w--size%

Coffee Blend A

$9.99

In Stock

Coffee Blend B

$12.99

Out of Stock

Personalised table

Coffee Blend A

$9.99

In Stock

Coffee Blend B

$12.99

Out of Stock

Overflow

Coffee Blend A

$9.99

In Stock

Coffee Blend B

$12.99

Out of Stock

Coffee Blend C

$12.99

Out of Stock

Coffee Blend D

$12.99

Out of Stock

Coffee Blend E

$12.99

Out of Stock

Coffee Blend F

$12.99

Out of Stock

Coffee Blend G

$12.99

Out of Stock

Coffee Blend H

$12.99

Out of Stock

Layout

Display

flex

display: flex;

block

display: block;

grid

display: grid;

inline-block

display: inline-block;

inline

display: inline;

Layout

block

display: block;

align-center

Layout

Flex

Flex class

flex

display: flex;

Direction

horizontal

flex-direction: row;

vertical

flex-direction: column;

mob-vertical

tab-vertical

mob-vertical-reverse

tab-vertical-reverse

Justify

justify--start

justify-content: flex-start;

justify--center

justify-content: center;

justify--end

justify-content: flex-end;

justify--space-between

justify-content: space-between;

justify--space-around

justify-content: space-around;

Align

align--top

align-items: flex-start;

align--center

align-items: center;

align--bottom

align-items: flex-end;

align--stretch

align-items: stretch;

align--baseline

align-items: baseline;

Flex child

flex-child__align--top

align-self: flex-start;

flex__align--center

align-self: center;

flex-child__align--bottom

align-self: flex-end;

flex-child__align--stretch

align-self: stretch;

flex-child__align--baseline

align-self: baseline;

flex-child__grow

flex: 1 1 0%;

flex-child__dont-grow

flex: 0 0 auto;

flex-child__shrink

flex: 0 1 auto;

wrap

flex-wrap: wrap;

flex-child__dont-grow

flex: 0 0 auto;

flex-child__shrink

flex: 0 1 auto;

Layout

Column

row

column

desk-1

width: 8.33%;

desk-2

width: 16.66%;

desk-3

width: 33.33%;

desk-4

width: 8.33%;

desk-5

width: 41.66%;

desk-6

width: 50%;

desk-7

width: 58.33%;

desk-8

width: 66.66%;

desk-9

width: 75%;

desk-10

width: 83.33%;

desk-11

width: 91.66%;

desk-12

width: 100%;

To see the classes, click here set sizing on grow

desk-1

desk-2

desk-3

desk-4

desk-5

desk-6

desk-7

desk-8

desk-9

desk-10

desk-11

desk-12

tab-1

tab-2

tab-3

tab-4

tab-5

tab-6

tab-7

tab-8

tab-9

tab-10

tab-11

tab-12

mob-1

mob-2

mob-3

mob-4

mob-5

mob-6

mob-7

mob-8

mob-9

mob-10

mob-11

mob-12

Layout

Grid

grid

auto

desk-1

grid-template-columns: 1fr;

desk-2

grid-template-columns: 1fr 1fr;

desk-2--1/2

grid-template-columns: 1fr 2fr;

desk-2--2/1

grid-template-columns: 2fr 1fr;

desk-3

grid-template-columns: 1fr 1fr 1fr;

desk-4

grid-template-columns: 1fr 1fr 1fr 1fr;

desk-5

grid-template-columns: 1fr 1fr 1fr 1fr 1fr;

desk-6

grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;

tab-1

tab-2

tab-3

tab-4

mob-1

mob-2

To see the classes, click here set sizing on grow

desk-1

desk-2

desk-2--1/2

desk-2--2/1

desk-3

desk-4

desk-5

desk-6

tab-1

tab-2

tab-3

tab-4

mob-1

mob-2

Layout

Heading layout

h1-title__wrap

display: flex;
flex-direction: column;
justify-content: center;
gap: 3rem;

h2-title__wrap

display: flex;
flex-direction: column;
justify-content: center;
gap: 1.5rem;

margin: 4rem(dek) 3rem(tab) 2rem(mob);

h3-title__wrap

display: flex;
flex-direction: column;
justify-content: center;
gap: 0.5rem;

margin: 2rem(dek) 1rem(tab) 1rem(mob);

Layout

Hiding elements

hide

display: none;

This element is hidden

hide--desktop

This element is hidden

hide--tablet+up

This element is hidden

hide--tablet

This element is hidden

hide--tablet+down

This element is hidden

hide--mobile-landscape+up

This element is hidden

hide--mobile-landscape

This element is hidden

hide--mobile-landscape+down

This element is hidden

hide--mobile-vertical

This element is hidden

Layout

overflow

overflow--auto

overflow--visible

overflow--hidden

overflow--scroll

Webflow

Webflow classes

All H1 Headings

The quick brown fox jumps over the lazy dog

All H2 Headings

The quick brown fox jumps over the lazy dog

All H3 Headings

The quick brown fox jumps over the lazy dog

All H4 Headings

The quick brown fox jumps over the lazy dog

All H5 Headings

The quick brown fox jumps over the lazy dog

All H6 Headings

The quick brown fox jumps over the lazy dog

All Links

Text Link

All Forms

All Labels

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

All Block Quotes

Block Quote

Bonus: our block-quote class

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.

All List Items

All Ordered Lists

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

All Unordered Lists

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

Flowmatic Styleguide - Lite

Navbar

Navbar

Footer

Footer

Global styles

Global style

Classes and structure

page-wrapper

main-wrapper

Containers

container

container

padding--0

Container--size

container--infinite

container--XL-90rem-1440px

container--L-80rem-1280px

container--M-64rem-1024px

container--S-48rem-768px

container--XS-32rem-512px

container--infinite

container--XL-90rem-1440px

container--L-80rem-1280px

container--M-64rem-1024px

container--S-48rem-768px

container--XS-32rem-512px

Spacing with spacers

Spacer classe

spacer

Auto spacers

spacer

auto-3XS

spacer

auto-2XS

spacer

auto-XS

spacer

auto-S

spacer

auto-M

spacer

auto-L

spacer

auto-XL

spacer

auto-2XL

spacer

auto-3XL

Element spacers

spacer

hero--section

spacer

H2--section

Height spacers

h--0.5rem | 8px

h--1rem | 16px

h--1.5rem | 24px

h--2rem | 32px

h--2.5rem | 40px

h--3rem | 48px

h--4rem | 64px

h--5rem | 80px

h--8rem | 128px

h--15rem | 240px

h-spacers (general)

h-spacers: tablet

h-spacers: mobile

Top+bottom spacing

top+bottom__spacing--XL

top+bottom__spacing--L

top+bottom__spacing--M

top+bottom__spacing--S

top+bottom__spacing--XS

top+bottom__spacing--0

top+bottom__spacing--XL

top+bottom__spacing--L

top+bottom__spacing--M

top+bottom__spacing--S

top+bottom__spacing--XS