> This page is for Flowkit CSS Framework, version v2 (default).
> For other versions, use one of these documentation indexes:
> - v2 (default): https://developers.webflow.com/flowkit/v2.0.0/llms.txt
> - v1: https://developers.webflow.com/flowkit/v1.0.0/llms.txt
> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.
# Page Structure
> Page and section structure in the Flowkit Framework.
## Page Structure
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**
---
## Section
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.
### Variations
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
* section is-secondary
* section is-accent-primary
* section is-accent-secondary
* section is-accent-tertiary
* section is-inverse
### Padding
The section class includes vertical padding by default. Use utilities to adjust:
| Utility Class | Description |
| ---------------------------------------- | ------------------------------ |
| padding\_none | Removes top & bottom spacing |
| padding-vertical\_small | Sets vertical spacing to small |
| padding-top\_none, padding-bottom\_small | Fine-tuned vertical control |
---
## Container
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:
| Class Example | Description |
| ----------------------- | ------------------------------------ |
| container | Default max width (standard layout) |
| container is-full-width | Stretches full width (edge-to-edge) |
| container is-large | Larger max width |
| container is-small | Smaller max width for narrow layouts |
### Padding Control
Adjust internal padding using utility classes:
* padding-horizontal\_none — removes side padding
---
## Navigation
The navigation bar uses the semantic `nav` tag and a base class Nav.
Navigation adapts to the background color using combo classes:
* nav is-accent-primary
* nav is-accent-secondary
* nav is-accent-tertiary
* nav is-inverse
* nav is-secondary
---
## Footer
Footer uses `footer` semantic tag and class Footer.
Footer also adapts to the background color using combo classes:
* footer is-secondary
* footer is-inverse
* footer is-accent-primary
* footer is-accent-secondary
* footer is-accent-tertiary
Every footer variation has a combo class for a footer link footer\_link on-inverse or on-accent-primary etc.