Page Structure

page_wrap

• Contains all page content

• Used for copying content to another page

• Has no styling except overflow: clip

Overflow clip prevents horizontal scrolling much like overflow hidden but without breaking position sticky or position fixed children.

page_main

• Contains all sections that are unique to this page

• Does not contain the navbar or footer

• Has no styling

• Tagged as “Main” for SEO & Screen Readers

Section

Use the Section Element provided by Webflow

• Automatically tagged as “Section” for SEO & Screen Readers

• Displays a nice section icon in the navigator

• Allows applying an ID for anchor links

In Lumos, the section tag is set to position relative by default

This allows the section to have absolute background visuals inside. This default can be overridden with the style panel if needed.

Section class names always end with “wrap”

We’ll often apply a data-theme attribute to the section to set section color

• data-theme="invert"

• data-theme="inherit"

• data-theme="light"

• data-theme="dark"

Container

Container class names always end with “contain”

Add the component class first and then the “u-container” helper class on top

Add data attributes to the container if needed of “data-padding-top” & “data-padding-bottom” to adjust section padding

This allows us to adjust top and bottom padding from component fields

• data-padding-top="none" | data-padding-bottom="none"

• data-padding-top="small" | data-padding-bottom="small"

• data-padding-top="main" | data-padding-bottom="main"

• data-padding-top="large" | data-padding-bottom="large"

Optional Smaller Container Max Widths That Match 10 Column & 8 Column Widths

In the variable panel, we can create variables of --max-width--small and --max-width--xsmall and add the following code to an embed.

https://preview.com/preview/grid-max-width?utm_medium=preview_link&utm_source=designer&utm_content=grid-max-width&preview=2e29e1d3721c84bd8fed760aba33f39c&workflow=preview

<style>
:root {
  --mw-double-padding: calc(var(--padding-horizontal--main) * 2);
  --mw-grid-width: calc(min(var(--max-width--main), 100%) - var(--mw-double-padding));
  --mw-grid-width-minus-gaps: calc(var(--mw-grid-width) - (var(--grid-gap--main) * 11));
  --mw-single-column-width: calc(var(--mw-grid-width-minus-gaps) / 12);
  --max-width--small: calc((var(--mw-single-column-width) * 10) + (var(--grid-gap--main) * 9) + var(--mw-double-padding));
  --max-width--xsmall: calc((var(--mw-single-column-width) * 8) + (var(--grid-gap--main) * 7) + var(--mw-double-padding));
}
</style>

Use the “Starter / Section” Component as an easy way to start a new section (unlink before editing)