The Webflow CSS Framework uses a semantic and component-based layout system. Here’s a typical page layout using semantic tags:
Page – tag: Body, selector: Body (All Pages)
Navigation – tag: nav, class: nav
Section – tag: section, class: section
Container – tag: div, class: container
Layout – e.g., grid, flex, card
Footer – tag: footer, class: footer
Page structure
Sections are the core layout blocks of a page. Each section must use the semantic Section tag, which can be set in the Webflow Settings Panel.
The main class section sets the section’s structure and default padding. Variations are applied with combo classes to adjust background and font colors. Combo classes follow the pattern: section is-secondary
The section class includes vertical padding by default. Use utilities to adjust:
The container class centers content and applies a max-width with internal horizontal padding. It ensures consistent alignment across all layouts.
These combo classes adjust the width:
Adjust internal padding using utility classes:
The navigation bar uses the semantic nav tag and a base class Nav.
Navigation adapts to the background color using combo classes:
Footer uses footer semantic tag and class Footer.
Footer also adapts to the background color using combo classes:
Every footer variation has a combo class for a footer link footer_link on-inverse or on-accent-primary etc.