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 (Page Slot)

• Contains all section components 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

• 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"