Sections
Learn about sections, and how to best use them in the Base System
Last updated
Learn about sections, and how to best use them in the Base System
Last updated
Sections are used to create separate blocks of content and divide the page into meaningful segments. For example, a website hero, testimonial or footer section. Sections gives space to the content on your page and prevent content from touching the edges of the screen.
The Base System includes five different sections that are managed using Section Variables. All Sections have different amounts of vertical padding but share the same horizontal padding (5%). You are encouraged to customize the default starter classes to suit your project needs. For example, you may want all of your sections to have a different background color, or overflow:hidden by default.
Section X Large
128px / 8rem
96px / 6rem
Section Large
96px / 6rem
64px / 4rem
Section Regular
64px / 4rem
48px / 3rem
Section Small
48px / 3rem
40px / 2.5rem
Section X Small
32px / 2rem
We recommend using the Section Element over a Div Block due to the following advantages:
Semantic Structure:
Comes with tag already set to <section> which enhances SEO and accessibility by clearly defining content hierarchy, which is beneficial for search engines and assistive technologies. Learn more about Semantic Tags from Webflow.
Anchor Links: Sections can have unique IDs, making it easy to create smooth scrolling effects for anchor links.
Visual Clarity in Webflow's Navigator: Section elements have an unique icon making them easier to identify and manage in Webflow’s Navigator panel.
If you want to style a section without affecting every instance, you can use combo classes to make changes to styles like background colors, text colors, overflow properties etc. You are encouraged to create combo classes that suit your needs.
If your sections require more unique styling changes, or you find yourself repeatedly needing to use combo classes. Don't be afraid to create a custom class.
