customization

Colors

Primary and secondary colors

Customizing the original color is all it takes to effortlessly update the light and dark versions.
Let me guide you through the simple steps:

1) Click on the color below,
2) Select the color swatch in the background menu,
3) Click on the pencil icon at the bottom,
4) Choose your desired color and save.

To make your color selection process easier, we've developed a handy color palette that you can find right here. Get ready to unleash your creativity with customized colors!

class
original
light
dark

color--primary

color--secondary

color--accent

To add a stylish background to your components, just remove the "hide" class and the "#f8f8f8" class, then replace it with the hexadecimal code the color palette as the div's name.

For example, you can name it "primary-absolute" or "accent-absolute" to apply your custom primary or accent color as the background for your component. It's an easy and effective way to personalize your design!

Text color and background color

Theses colors will apply to every text and every page you have in your document.

class
original

color--text

color--background

customization

Buttons

Base buttons

Customize your buttons right here! Feel free to unleash your creativity and style them however you like. Explore the item/button section to discover various other button variations and get inspired to create unique button designs.

class
code

button

secondary

button

tertiary

button

text

Don't forget to style the hover state of your buttons.

customization

Typography

Font, weight, size and Height in the body tag

When it comes to the body tag, tweaking the font, weight, size, and height settings will apply those changes to all unstyled text in your document. The text color and background color, on the other hand, are already determined by the color--text and color--background classes, which are directly applied to the body. So, get ready to fine-tune your text styles while the color magic is taken care of!

1) Select the body element in the Navigator
2) Click on the style selector on the place holder text "Select a class or tag"
3) Select Body (All pages)
3) Update the font, weight, size and height as you want.

headings and heading style

To transform the style of all headings, simply click on the text and select "Inheriting 2 selectors" to access the All Headings option. Just a friendly reminder: make sure to keep the heading__style and All Heading selectors aligned for a harmonious heading experience. Get ready to make your headings stand out with personalized flair!

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.

Paragraphs

To transform the style of all paragraphs:

1) Select the text bellow
2) Click on the style selector on the place holder text "Select a class or tag"
3) Select All Paragraphs
4) Update the font, weight, size and height as you want.

class
code

All Paragraphs

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.

customization

Navbar

The website navbar: your friendly guide to effortless browsing, neatly organizing sections and pages with a touch of elegance.

Let's get that navbar set up and rocking!

Here's what you need to do:
1) Click on the navbar div and hit the pencil icon to edit the webflow component.
2) Simply copy your customized navbar from Flowmatic and paste it into the div block.
3) Don't forget to add your page links and button text.

Voila! You now have a versatile navbar component that can be used throughout your website. And the best part? If you make any edits using the pencil icon, they'll automatically apply to all instances of this component. Easy peasy, right?

Navbar

customization

Global styles

Introducing the Global Styles component in Webflow, your ultimate tool for centralized custom styling! It allows you to define and manage your website's styles in one convenient location, promoting consistency across your design. Although Flowmatic recommends placing it below the body class, it's currently unavailable in the Webflow starter plan due to custom code limitations. However, if you have a higher plan, you can make the most of custom code functionality and personalize the Global Styles component to suit your preferences. Say goodbye to repetitive styling and welcome a more streamlined approach to design management.

title

1) Click on the global style div and hit the pencil icon to edit the webflow component.
2) Click again on the div and hit the cog icon to open the code editor.
3) Don't forget to save.

Global style

Structure of the page

Classes and structure

Experience a well-structured website with Flowmatic's organized layout. With a page wrapper class, main wrapper class, and clear section hierarchy, it ensures consistency, efficient styling, and easy maintenance, giving your website a seamless and cohesive look. Embrace the benefits of a structured design that enhances user experience and simplifies website management.

class
Modify the class

page-wrapper

main-wrapper

Page wrapper

As the name cleverly suggests, it wraps around each and every element on the page. Now, here's the fun part: styling the page-wrapper is entirely up to you. It's optional, so feel free to apply styles if and when necessary. So, if you ever need to apply a style to the entire page without resorting to the body tag (which, let's face it, is a bit of a coding faux pas), we've got you covered.

Main wrapper

This impressive wrapper is armed with the mighty <main> HTML tag, effortlessly wrapping around the majority, if not all, of our website's content sections, capturing their essence. Just a friendly reminder: make sure to keep the navigation and footer separate from the main-content area. They have their designated spots outside of it.

Why is this important? Well, this core structure helps screen readers and search engines understand the heart of our page. By clearly marking the "main" content, we ensure a smooth browsing experience for everyone.

Structure of the page

Easily navigate through your website with Flowmatic's structured layout, providing a quick glance at each section for seamless browsing and efficient management. Enjoy effortless navigation and a clear overview of your website's composition.

Navigator
Body
page-wrapper
navbar
main-wrapper
component__section
component__section
component__section
footer
Structure of the components

Intro

Achieve consistent and responsive component design with Flowmatic's structured layout. The component__section includes a background class with customizable image and color options, ensuring seamless integration across devices. The container class with spacers and content class provides a flexible framework for organizing text and images within the component. Enjoy effortless customization and a cohesive component structure.

Structure inside the component

Navigator
component__section
background
container

size

spacer

size

content
spacer

size

Structure of the components

Background

Here's a simple guide on how to customize the background of your component:


1) Background Image:
- By default, the background image is hidden in the background class.
- To use your own image, simply select and upload your desired image.
- If you prefer to remove the background color option, you can delete the color div from the background class.

2) Background Color:
- In the background class, there is a hidden div with a color class attribute.
- To set a background color instead of an image, delete the "hide" class from the div.
- Then, change the hexadecimal code for the background color using the color palette provided by Flowmatic.
- If you want to exclusively use the background color and remove the background image option, you can delete the Background Image div.

With these steps, you can effortlessly customize the background of your component, whether it's through an image or a color, to achieve the desired visual impact.

Side Note: If you're unsure or want the flexibility to change in the future, you can keep both the Background Image and Background Color divs. This allows you to easily switch between using an image or a color for your component's background as needed.

Navigator
component__section
background
background-image

hide

#f8f8f8

hide

container

size

Structure of the components

Containers

The container class with spacers and content class provides a flexible framework for organizing text and images within the component.

Customize the horizontal padding effortlessly with Flowmatic's container class. You can easily adjust it for all containers at once, ensuring consistent spacing in your design. For added flexibility, you can give a class of 'padding--0' to remove the horizontal padding, creating full-screen content or unique layouts. Plus, it's responsive-friendly, enabling you to set specific padding values for desktop, tablet, and mobile views. Enjoy the freedom to create beautifully balanced designs.

container

container

padding--0

Navigator
component__section
background
container

size

spacer

size

content
spacer

size

Container--size

In most cases, you'll find us using the 'container--L-80rem-1280px' class to ensure a well-balanced and visually pleasing layout. This consistent container class helps maintain a cohesive design aesthetic across our components.

Container--size is a handy option for organizing and aligning your elements effortlessly. Enjoy the benefits of enhanced visual appeal and improved design structure.

class
desktop + tablet

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

At Flowmatic, we pay attention to the details. We typically apply a padding of 2rem to our 'container' class, which means the actual width of the 'container--L-80rem-1280px' class (and all the others classes) is 2rem smaller.

It's important to keep this in mind when adding your own padding to the 'container' class, as it will further reduce the available space within the 'container--size'. This consideration ensures a consistent and well-balanced design.

Strategy to Spacing

Spacing with spacers

Spacers are a crucial tool in web design, enabling consistent and balanced spacing between elements, sections, and content. They greatly contribute to visual organization, readability, and overall user experience. With Flowmatic's integrated options, you have the flexibility to choose either a single spacing strategy or combine multiple strategies, empowering you to create a customized and harmonious layout that aligns perfectly with your preferences and needs.

Spacer classe

The 'spacer' class is a nifty tool that ensures spacers are visible by setting their width to 100%. It's incredibly handy because even with numerous spacer options available, the 'spacer' class will always be the first one you see in the navigator. Here's a tip: assign a color to the spacer class, and all your spacers will pop up in your document, making it effortless to spot any missing spacers at a glance.

spacer

Auto spacers

Introducing auto-spacers: the secret sauce for consistent and efficient element spacing on your website. With 9 ready-made options, ranging from 3XS to 3XL, these spacers bring the advantages of effortless consistency, responsive adaptability, and versatile reusability. Say goodbye to manual tweaking and hello to a perfectly spaced layout that scales beautifully across devices.

class
desktop
tablet
mobile

spacer

auto-3XS

height: 0.5rem;
height: 0.5rem;
height: 0.5rem;

spacer

auto-2XS

height: 1rem;
height: 1rem;
height: 1rem;

spacer

auto-XS

height: 1.5rem;
height: 1.5rem;
height: 1.5rem;

spacer

auto-S

height: 2rem;
height: 2rem;
height: 2rem;

spacer

auto-M

height: 2.5rem;
height: 2.25rem;
height: 2.25rem;

spacer

auto-L

height: 3rem;
height: 2.5rem;
height: 2.5rem;

spacer

auto-XL

height: 4rem;
height: 3rem;
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

The secret weapon for achieving consistent spacing between sections. By combining the generic 'spacer' class with the 'H2--section' class, you can effortlessly apply this spacer to evenly space every section starting with an H2 heading. It's not just responsive, but also magically synchronized—tweak a parameter once, and watch as it automatically updates across all H2--section spacers.

class
desktop
tablet
mobile

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

Spacers with the 'h--size' class let you play the height game. They take up all the horizontal space like a hungry hippo, thanks to the 'spacer' class setting the width to 100%.

Add 'mob:h--size' and 'tab:h--size' to make them responsive and fit the different screens. Unlike the pre-made auto-spacers with limited lives, you can create your own spacer adventures.

Perfect for those one or two instances when you need a special touch without spinning up a whole new auto-spacer.

class
Properties

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;
Navigator
element

spacer

h--2rem | 32px

tab:h--1.5rem | 24px

mob:h--1rem | 16px

To see the classes, click here set sizing on grow

h-spacers (general)
h-spacers: tablet
h-spacers: mobile

Top+bottom spacing

Introducing Top+bottom spacing, a convenient class that can be directly applied to the content class. This responsive spacing option ensures consistent spacing at the top and bottom. While it offers simplicity, it's worth noting that Top+bottom spacing provides less flexibility as it restricts the ability to set different sizes for the top and bottom spacing.

At Flowmatic, we prioritize flexibility and customization in our spacing options, which is why we recommend using auto-spacing instead of Top+bottom spacing. Auto-spacing enables independent control over top and bottom spacing, offering a wider range of design possibilities and adaptability to different content scenarios.

Class
Desktop
tablet
mobile

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

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

Navigator
component__section
background
container

size

content

top+bottom__spacing

Spacing

padding

Padding works within an element. It's like the internal cushioning that provides space between the element's content and its boundaries. By adjusting padding, you control the breathing room inside an element, making sure its content doesn't feel cramped.

padding-size

class
Properties

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

Here's a neat trick: when you specify a 'padding direction', it automatically sets the padding from other directions to 0rem. This means that only the specified directions will be affected by the padding you add afterwards. It's a convenient way to fine-tune the spacing in specific areas without worrying about the rest. Keep things tidy and focused with this handy feature!

class
Properties

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

Margins refer to the space outside an element, creating gaps between that element and neighboring elements. It's like the personal space each element needs to maintain. You can adjust margins to control the distance between elements, ensuring they are properly separated.

margin-size

class
Properties

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

When you specify a 'margin direction', it automatically sets the margin from other directions to 0rem. This means that only the specified directions will be affected by the margin you add afterwards.

class
Properties

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

The height property allows you to explicitly set a fixed height for an element, disregarding its content. It's particularly useful when you need precise control over an element's dimensions, such as banners or headers, where maintaining consistent sizing is vital for visual harmony. By using height, you ensure that the element maintains a specific height, regardless of the content within it, making it a valuable tool for achieving precise design requirements.

Height in rem | px

class
Properties

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;
0.5
1
1.5
2
2.5
3
4
5
8
15
24

To see the classes, click here set sizing on grow

h-size (general)
h-size: tablet
h-size: mobile

Height in others unities

class
Properties

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;

When setting up a full-height section, it's a common design pattern to use min-h--100vh rather than h--100vh. By doing so, you ensure that the section will always be at least as tall as the viewport, while also taking into account any content inside. This approach prevents any unsightly overflow or clipping problems that may arise when the browser height is decreased. Check the min-height section just bellow.

To see the classes, click here set sizing on grow

h-size (general)
h-size: tablet
h-size: mobile
sizing

min-height

The min-height property provides a flexible approach to setting the minimum height for an element. Unlike height, it allows the element to expand vertically based on its content if needed, ensuring that it never becomes smaller than the specified minimum height. This property is particularly handy for creating full-height sections that adapt gracefully to varying content lengths while maintaining a minimum desired height for visual consistency.

class
Properties

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

Min-height properties can be extended to different breakpoints, including a tablet version represented by 'tab:min-h--(size)' and a mobile version denoted as 'mob:min-h--(size)'.

For example, you can set a class of 'min-h--4rem' for desktop screens, 'tab:min-h--6rem' for tablets, and 'mob:min-h--8rem' for mobile devices. This approach ensures that the content adapts seamlessly across various breakpoints, providing consistent and responsive designs.

sizing

max-height

The max-height property offers a way to set an upper limit on the height of an element. It allows you to restrict the element's height to a specific maximum value, preventing it from growing beyond that limit. This property is useful when you want to constrain the height of an element, such as image containers or text boxes, ensuring they don't exceed a certain height while still maintaining responsiveness and accommodating different content sizes.

Max Height in rem | px

class
Properties

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

By adjusting the width property, you can make elements wider or narrower, allowing for precise layout and design control. In Flowmatic, you can set the width property using various units such as pixels (px), percentages (%) or viewport width (vw). This flexibility enables you to create responsive designs that adapt to different screen sizes. Whether you're working with containers, images, or other elements, the width property is a powerful tool for achieving the desired visual layout in your project.

Width in rem | px

class
Properties

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 %

class
Properties

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

The min-width property is a useful tool for establishing responsive layout boundaries, preventing content compression, and maintaining optimal usability across different screen sizes.

class
Properties

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

Setting a max-width value allows you to control the maximum width of an element as the viewport size changes. This ensures that the content doesn't overflow or become too wide on larger screens.

class
Properties

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;

Applying a max-w--60ch to text elements, such as paragraphs or headings, helps to prevent long lines of text that can be difficult to read. It ensures optimal readability by limiting the line length.

To see the classes, click here set sizing on grow

Typography

Intro to typography

Typography plays a pivotal role in web design, adding personality and enhancing user experience. By customizing typography, you can create a unique and visually appealing website. Make your website stand out with carefully crafted typography that captures attention and conveys your brand's message effectively.

Font, weight, size and Height in the body tag

When you make changes here, they will be applied to all unstyled text across your document. Keep in mind that the text color and background color have already been set by the color--text and color--background classes, which are directly applied to the body. So go ahead and customize the rest of the typography to create a cohesive and visually appealing design.

1) Select the body element in the Navigator
2) Click on the style selector on the place holder text "Select a class or tag"
3) Select Body (All pages)
3) Update the font, weight, size and height as you want.

Typography

headings and heading-style

class
desktop + tablet
mobile

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;

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

Here's a simple guide on how to customize your paragraphs:

1) Select the text
2) Click on the style selector on the place holder text "Select a class or tag"
3) Select All Paragraphs
3) Update the font, weight, size and height as you want.

class
Properties
Example

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

class
desktop + tablet
example

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

class
Properties
example

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

class
Properties
example

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

class
Properties
example

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

class
Properties
example

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

Here's a quick recap of all the buttons you can integrate into your designs. For icons, head over to the dedicated icon section where you'll find a treasure trove of options. Get ready to level up your button game!

You can organise the classes for your buttons as you like but we recommend to put the state (secondary, tertiary, text) before the size attribute.
Feel free to add variants to your buttons.

Navigator
button

secondary

small

Dropdown buttons

Dropdown position

When it comes to the position of dropdown menus in dropdown buttons, Flowmatic offers various strategies:

1. For the first strategy, simply applying a min-w--size to the dropdown card.
2. The second strategy involves adding the class "fullwidth" to the dropdown__list for a full-width dropdown.
3. The third strategy combines the "fullwidth" class on the dropdown__list, a min-w--size on the dropdown card, and adjusts the margin automatically.
4. In the fourth strategy, using "dropdown__list, 100%-left, min-w--size" pushes the dropdown card to the left by the length of the button.
5. The fifth, sixth, and seventh strategies use "dropdown__list, center-L/M/S" to center the dropdown around the button. The lengths are based on the button size, with L being 7 lengths, M being 5 lengths, and S being 3 lengths.

These strategies provide flexibility in positioning dropdown menus based on your specific design needs.

Dropdown icon

Check out the "hiding" section where you'll find a variety of "hide" classes that can be applied to the dropdown__icon.

dropdown__icon

hide

dropdown__icon

hide--desktop

dropdown__icon

hide--tablet

dropdown__icon

hide--mobile-landscape+down

Items

Icons

Flowmatic has created classes for both square and round icons, offering a range of sizes from 16px (1rem) to 96px (6rem). We've also got you covered with classes for non-square icons, available in the same 6 size options. With a carefully curated collection of 40 icons, all you need to do is copy and paste them into your project. Effortlessly enhance your designs with these versatile and ready-to-use icons.

Fixed size, square and round icons

class
desktop + tablet
example

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

class
desktop + tablet
example

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

arrows
Random
Random
Random
Random
Social media
Items

Image

Image wrapper

The image wrapper is set to a minimum height of 100%, ensuring its full coverage. The overflow is hidden, keeping the image contained within its boundaries. With a relative position, the image inside can be displayed absolutely, allowing for precise positioning.

image__wrap

To adjust the image size, simply apply a min-h--size class to the image__wrap. This allows you to customize the height of the image wrapper effortlessly.

Image

The image class takes up the full width and height of its container with a perfect fit. Positioned absolutely, it fills the image__wrap seamlessly. With the cover setting, there's no white space, ensuring the image is always displayed beautifully.

Components

Radius

A radius is like the "roundness" or curvature of an element's corners. It adds a touch of smoothness and softness to the edges, giving a more polished and visually pleasing look. Think of it as giving a friendly and welcoming vibe to your design, creating a sense of approachability and style.

class
Properties
example

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

class
Properties
example

tab__radius--0

radius: 0rem;

mob__radius--0

radius: 0rem;
Components

Border

A border is like a frame that surrounds an element, just like the frame around a picture. It adds structure and definition, making the element stand out and catch the eye. Think of it as a stylish way to highlight and emphasize certain elements in your design, giving them a polished and finished appearance. It's like adding the perfect finishing touch to your visual composition.

class
Properties
example

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

A box-shadow is like adding a touch of magic to your design. It creates a subtle or dramatic effect by casting a shadow around an element, giving it depth and dimension. It's like the soft glow around a mystical object, adding a hint of intrigue and visual interest. With box-shadow, you can effortlessly elevate your design, making it visually captivating and adding a touch of enchantment to your web elements.

class
Properties
example

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

A color palette is like a painter's collection of vibrant hues, carefully selected to bring your design to life. With a well-curated color palette, you can add visual flair, create a cohesive look, and make your website a feast for the eyes. So go ahead, indulge in the endless possibilities of colors and paint your digital masterpiece!

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

The contrast ratio plays a crucial role in enhancing the accessibility of your website. It depends on various factors like the foreground and background colors (in this case, #303030 and #f8f8f8 for the first color in the list), font size (12px), and font weight (400).
Learn more here.

We've meticulously measured the contrast ratios in our color palette based on the default text color (#303030). If you decide to change this value, remember to ensure the contrast ratio remains optimal with your updated color choice.

You can easily check the contrast ratio by clicking on the color swatch in the typography menu of Webflow. It's a helpful tool to guarantee your text remains legible and visually appealing across your website.

To add a stylish background to your components, just remove the "hide" class and the "#f8f8f8" class, then replace it with the hexadecimal code of your desired color as the div's name. For example, you can name it "primary-absolute" or "accent-absolute" to apply your custom primary or accent color as the background for your component. It's an easy and effective way to personalize your design!

Navigator
component__section
background
#f8f8f8
container

size

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

If you don't assign a class to your table--box, it will automatically adjust its size to occupy the available space. This ensures that all table--box elements have the same size, providing a consistent layout for your tables.

Product Name
Price
Availability
Coffee Blend A
$9.99
In Stock
Coffee Blend B
$12.99
Out of Stock
Navigator
table--wrapper
table--row

header

table--box
table--box
table--box
table--container
table--row
table--box
table--box
table--box
table--row

last

table--box
table--box
table--box

With w--size%

To apply a specific width percentage (w--size%) to your table--box, you'll first need to add a "size" class. This class ensures that the table--box has the appropriate sizing property, allowing it to shrink if needed to accommodate the specified width percentage. Customize your table--box dimensions with ease and maintain a responsive design.

Product Name
Price
Availability
Coffee Blend A
$9.99
In Stock
Coffee Blend B
$12.99
Out of Stock
Navigator
table--wrapper
table--row

header

table--box

size

w-60%

table--box

size

w-20%

table--box
table--container
table--row
table--box

size

w-60%

table--box

size

w-20%

table--box
table--row

last

table--box

size

w-60%

table--box

size

w-20%

table--box

Personalised table

Craft the perfect table that suits your needs with personalized classes. We suggest using the table name followed by "col" and the corresponding column number. For example, in this case, we used table1--col1,2,3. However, you can be more specific and create classes like price-table--price or price-table--availability to ensure consistency and reusability throughout your project. Tailor your tables to perfection and maintain consistent sizing across your website.

Product Name
Price
Availability
Coffee Blend A
$9.99
In Stock
Coffee Blend B
$12.99
Out of Stock
Navigator
table--wrapper

table1

table--row

table1--header

table--box

table1--col1

table--box

table1--col2

table--box

table1--col3

table--container
table--row
table--box

table1--col1

table--box

table1--col2

table--box

table1--col3

table--row
table--box

table1--col1

table--box

table1--col2

table--box

table1--col3

Overflow

Unlock the magic of scrollable tables by simply adding an overflow--auto class and setting a specific height to your table--container. This nifty combination allows you to effortlessly navigate through your table content, ensuring a seamless user experience. Stay in control and keep your tables neatly contained with this handy feature.

Product Name
Price
Availability
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

Let's take a closer look at how different display options in Webflow can shape your designs:

- Flex: Arrange children in a single dimension, either horizontally or vertically. Customize the stacking, alignment, spacing, and wrapping. Flexibility at its best, allowing for responsive designs.

- Block: It's the default setting, giving elements a clear structure. Child elements start on new lines and take up the full width, unless customized. Perfect for organizing content with flexibility.

- Grid: Arrange children in columns and rows, both horizontally and vertically. Customize positioning, alignment, and gaps between elements. You have the power to fine-tune the layout of grid children.

- Inline-Block: Children are placed side by side within their parent element. Width is determined by content, and elements wrap to the next line when needed. Great for creating horizontal flows.

- Inline: The default for text content, maintaining the natural flow of text. Though width and height can't be changed, you can tweak margins and padding to adjust the layout.

Each display option offers unique advantages, providing you with the flexibility to structure and style elements according to your vision. Whether you prefer block-level organization, grid-based layouts, flexible alignments with flex, inline-block arrangements, or seamless text integration with inline display, Webflow gives you the tools to bring your designs to life. So go ahead, get creative and make your website shine!

Class
Properties
appercu

flex

display: flex;

block

display: block;

grid

display: grid;

inline-block

display: inline-block;

inline

display: inline;
Layout

block

Class
Properties
appercu

block

display: block;

The align-center class is your go-to for centering the content within a block. It adds automatic margin to both the right and left sides of the element, ensuring a perfectly centered appearance. It's like the flex equivalent of justify--center, making it super convenient for achieving that balanced and visually pleasing alignment.

align-center

Layout

Flex

Flex class

Class
Properties
appercu

flex

display: flex;

Direction

When it comes to flex classes, we understand that sometimes you want them to be vertical, and other times only vertically aligned on tablets. We've got you covered for all scenarios. Imagine a stylish component with an image on the left and text on the right, seamlessly adapting to vertical orientation on mobile, with the block intelligently inverted so that the text takes the lead. Our range of custom classes ensures that your design needs are met in every situation.

Class
Properties
appercu

horizontal

flex-direction: row;

vertical

flex-direction: column;

mob-vertical

tab-vertical

mob-vertical-reverse

tab-vertical-reverse

Justify

Need to align your content just the way you want? No worries! We've got you covered with a range of classes: justify--start, end, center, space-between, and space-around. Achieve perfect alignment and spacing for your content effortlessly.

Class
Properties
appercu

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

Looking for the perfect alignment for your content? We've got you covered with our versatile range of alignment classes: align center, end, stretch, start, and baseline. Achieve the precise alignment you need with ease.

Class
Properties
appercu

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

Want to customize the behavior of your flex child elements? Our flex child classes are designed to be applied to the children of a flex container. You have the power to control alignment, growth, and wrapping within your sub-classes. Create the perfect layout for your content effortlessly.

Navigator
flex
div (can be any layout)
Class
Properties
appercu

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;
Class
Properties
appercu

flex-child__grow

flex: 1 1 0%;

flex-child__dont-grow

flex: 0 0 auto;

flex-child__shrink

flex: 0 1 auto;
Class
Properties
appercu

wrap

flex-wrap: wrap;

flex-child__dont-grow

flex: 0 0 auto;

flex-child__shrink

flex: 0 1 auto;
Layout

Column

In Webflow, the 12 column system allows you to create flexible and responsive layouts. Imagine your page as a grid with 12 columns. You can easily assign a specific number of columns to each element, giving you precise control over their width and positioning. Whether you want a single full-width element or multiple columns side by side, this intuitive system ensures your design looks great on any device. Say goodbye to guesswork and embrace the simplicity of building beautiful, responsive layouts with Webflow's 12 column system.

How it works ?

Easily create responsive layouts by adding a specific number of columns to your element's "column" class. Use the prefixes "desk," "tab," and "mob" to control how the columns behave on different devices. It's a straightforward way to ensure your content adapts beautifully across desktop, tablet, and mobile screens.

row

column

class
Properties

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

Navigator
row

1rem

column

desk-1

tab-11

mob-6

column

desk-11

tab-1

mob-6

Layout

Grid

With Webflow's grid system, you can create versatile layouts that organize elements both horizontally and vertically. Simply add the "grid" class to a parent element, and then customize the positioning, alignment, and distribution of its child elements within the grid. You can also adjust the gaps between columns and rows for added flexibility. Grids allow you to create beautiful, responsive designs that adapt seamlessly to different devices and screen sizes.

grid

grid

auto

class
Properties

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

At Flowmatic, we suggest organizing your classes in the order of mobile, tablet, and desktop.

This approach offers the advantage of seeing immediate results in the designer and makes it easier to make adjustments to the desktop layout if needed. Since mobile layouts tend to be more stable, focusing on desktop changes becomes more efficient and flexible.

Navigator
grid

mob-1

tab-2

desk-4

1rem

Layout

Heading layout

To maintain a seamless experience, it's advisable to ensure that headings and other reusable elements are uniformly spaced. By adjusting the spacing between these elements, you can effortlessly apply the changes across the entire website. It's as easy as pie!

class
Properties

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

[H2] Give us a catchy title to make this section pop

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id quam laoreet, fringilla.

Navigator
h2-title__wrap

margin--0

text__align--center

Heading 2
text__size__medium
button__wrapper
Layout

Hiding elements

If you want to hide your content at specific breakpoints, don't worry - we have you covered with our range of classes. You can easily control the visibility of your content across different devices and orientations.

class
Properties
example

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 in Webflow allows you to control what happens when content overflows its container. It's like having a magic box that can contain any type of content, from images to text. You can choose to show scrollbars and let users scroll through the content, or hide the overflow and keep everything neatly contained. It's a handy feature to ensure your designs look polished and organized, no matter the size or amount of content.

overflow--auto

overflow--visible

overflow--hidden

overflow--scroll

Webflow

Webflow classes

Native Webflow classes are pre-defined CSS classes that are built into the Webflow platform. They provide a convenient way to style and structure elements without having to write custom CSS code.

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

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.

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.

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

  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. 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.

All Images