Sections

Learn about sections, and how to best use them in the Base System

1.0 Sections

Sections in development give space to our layouts, and provide the primary place to create page spacing, logically group elements, and to inform search engines of it's intended purpose as a <section>. In the Base System sections represent specific layout areas, like a testimonial, or a footer, and all pages are built by combining different sections

Learn more about how structure your pages through the structure overview page.

2.0 Section Classes

Class Name	Top & Bottom Padding	Left & Right Padding
Section X Large	144px	5%
Section Large	108px	5%
Section Regular	72px	5%
Section Small	54px	5%
Section X Small	36px	5%
{Custom} Section	{Custom}	{Custom}

3.0 General Usage

3.1 Overview

Sections in Webflow should use the default <section> element, and not a <div-block>. Using the section element itself provides us with some development advantages listed below:

• Has semantic <section> tag applied to aid web crawlers and improve accessibility and SEO.

• Prevents accidental nesting of sections within each other

• Provides a clear and distinct visual icon within navigator panel

• Provides a clear and distinct heirachy within the webpage

3.2 Class Naming

Class naming for sections follows a similiar approach to other structure elements. You can learn more about the general philosophy of class naming here.

• Default Sections: Default sections use descriptive names based on the amount of padding

  • Example: Section Large, Section Small, Section X Small

• Custom Sections: Use section as a suffix to the parent category for custom sections

  • Example: Testmonial Section, Pricing Section