The Lumos page structure helps keep each page consistent and enables editors to easily add components in the page slot. Your site may require a slightly different page structure if you have additional elements needed in the page wrap (eg. cookie consent), but this is the foundation that Lumos pages are built with.

page_wrap

• Contains all page content
• Used for copying content to another page
• Set to overflow clip to prevent horizontal scroll
• Has a min height of 100svh and display flex to keep the footer anchored to the bottom of the screen

Global Styles

• Contains CSS used across all site pages

Global Guides

• Optional overlay to check how elements are aligning with each other across sections
• Automatically hides inside preview and on the published site

Nav

• Add your custom nav that should be used across every page

Page Slot (page_main)

• Contains all section components that are unique to this page
• Is a page slot so clients can add and reorder sections in build mode
• Does not contain the navbar or footer
• Tagged as “Main” for SEO & Screen Readers
• Has an ID of "main" so we can anchor link to it with skip to main buttons