Section

Section component is a basic building block of the page, that represents a generic standalone section. Sections can use different backgrounds to enhance the structure of the page content.

Component checklist

Figma

Not available

Status

Stable

HTML

Up to date

React

Up to date

Twig

Not scheduled

Design usage

The Section component is a foundational building block in page design. It provides structure and visual separation between different content areas and also ensures consistency in spacing, alignment, and background treatments, making it easier to create well-balanced layouts.

When to Use the Section Component

  • To divide content into clearly defined horizontal sections on a page.
  • When a part of the page needs a different background color to stand out.
  • To maintain consistent top and bottom padding between sections.
  • To improve scannability by visually grouping related content.

 

© 2025 Spirit. Page last updated on Mar 19, 2025, 19:38