Page Structure
Overview
In most cases each website page should follow the below basic structure.
— .global CSS
— .page wrapper
—— .nav
—— .container
——— .component
—— .spacer
—— .container
——— .component
—— .footer
Containers
Overview
Use containers to set a maximum horizontal width on all website content. This improves usability and legibility of content on large screens.
Application
Apply the class name directly to any div element.
Usage
Containers can sit both inside or outside a component. Use inside of you'd like the component to run the full horizontal page width.
Class
Value
.container
.is--xsm
Max-width: x
.container
.is--sm
Max-width: x
.container
.is--md
Max-width: x
.container
.is--lg
Max-width: x
.container
.is--xl
Max-width: x
.container
.is--xxl
Max-width: 100%
Class
Value
.container
is--fluid
Max-width: 100%
.container
.@[device] is--fluid
Max-width: 100%
Spacing: Layout
Spacer Blocks
We avoid global spacing classes for modern marketing websites . Through extensive testing and use we've found they create an extra level of complexity and make it difficult to manage across device breakpoints.
Application
Spacer blocks can be used to create vertical space between components on your page. Use them when you need to create a large gap between content. Apply to a single div element.
Structure
— page wrapper
—— component
—— spacer
—— component
Class
Value
.spacer
.is--10
Min-height: 1rem
.spacer
.is--20
Min-height: 2rem
.spacer
.is--30
Min-height: 3rem
.spacer
.is--40
Min-height: 4rem
.spacer
.is--50
Min-height: 6rem
.spacer
.is--60
Min-height: 8rem
.spacer
.is--70
Min-height: 10rem
.spacer
.is--80
Min-height: 12rem
.spacer
.is--90
Min-height: 16rem
.spacer
.is--100
Min-height: 20rem
Class
Value
.spacer
.is--10
.@[media] is--hidden
Display: None
Spacing: Components
Overview
Inside any component (Navigations, Footers, Cards etc) you can apply top, left, right and bottom padding or margins to create space.
Units
In most cases use REM units for padding and margins. For advanced layout also consider vw , vh and percent.
Next
Settings
Webflow Docs