Section
Section card with a heading (optionally clickable)
Introduction
A section is a component that groups related content together, providing structure and organization to a page. Sections help users navigate and understand the content by breaking it into manageable parts. You can use multiple sections on a page to create a clear hierarchy and improve the overall user experience.
Interactive demo
Check out the interactive demo below to explore different configurations of the Section component:
This is the section content. You can add any content here, like text, images, or other components.
Sections help organize your page into logical groups, making it easier for users to understand and navigate.
Usage
Section can be used for a lot ot things, but here are some best practices to follow when using sections in your design:
Use a small sized button in section headers for better visual alignment.
Avoid using regular button size in section headers, as they won't align well visually with other sections.