Section Layout

When to Use a Section Layout

Use section layouts to visually group related parts of interfaces. Each section has a vertical margin below it to separate it from other page content. An optional heading may be specified to describe the section. Sections may also be configured to allow users to collapse and expand content.

Use section headings to describe the key content groupings on a page

Wrap content in a section layout to create vertical spacing below it

Collapsible Sections

Collapsible sections add clutter to pages and also increase the cognitive load on users. Don't make sections collapsible unless you have a good reason to believe that users would benefit from the capability. For example, a form that users would fill out from top to bottom probably doesn't need collapsible sections.

An example of when to use collapsible sections is when a user doesn't need to read a page from top to bottom, and knows exactly which section they want to jump to.

DON'T

Don't use section headings for page content controls, such as filters

DO

Use links to show and hide controls. Reserve section headers for representing the content structure of your page.

DON'T

Don't mix collapsible and non-collapsible sections on the same page to allow for better alignment of the section headings

FEEDBACK