Lumos
  • Consistency at Scale
  • Docs
    • Breakpointless
    • Class Naming
    • Page Structure
    • Typography
    • Color
    • Grid
    • Flexbox
    • Sizes & Spacing
    • Fluid Responsiveness
    • Components
    • FAQs
  • Resources
    • Cloneable
    • Figma File
    • Component Library
    • Chrome Extension
    • Changelog
    • Showcase
Powered by GitBook
On this page
  • page_wrap
  • page_main
  • Section
  • Container
  • Global / Section Space

Was this helpful?

  1. Docs

Page Structure

PreviousClass NamingNextTypography

Last updated 2 months ago

Was this helpful?

page_wrap

  • Contains all page content

  • Used for copying content to another page

page_main

  • Is a page slot so clients can add and reorder sections in build mode

  • Contains all section components that are unique to this page

  • Does not contain the navbar or footer

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

Container

Container class names always end with “contain”

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

Global / Section Space

Use the Global / Section Space component to create top and bottom spacing within each section that can be connected to component props.