Section
A titled part of a page. Specification: docs/components/section.md
Basics
A .canon-section: a header (a heading as its title, a description, actions), then its content. No frame: for one, put it in a Card.
Billing details
Where invoices go, and when they're due
- Company
- Globex Corporation
- Billing email
- billing@globex.example
- Payment terms
- Net 30
On a page
Sections one after another, under the page's own title. Their headings carry the page's outline (h2 under its h1).
Billing details
Where invoices go, and when they're due
- Company
- Globex Corporation
- Billing email
- billing@globex.example
- Payment terms
- Net 30
Payment terms
Applied to new invoices
- Company
- Globex Corporation
- Billing email
- billing@globex.example
- Payment terms
- Net 30
Sizes
data-size on the section or a container: sm, md, lg.
Billing details
Where invoices go, and when they're due
- Company
- Globex Corporation
- Billing email
- billing@globex.example
- Payment terms
- Net 30
Billing details
Where invoices go, and when they're due
- Company
- Globex Corporation
- Billing email
- billing@globex.example
- Payment terms
- Net 30
Billing details
Where invoices go, and when they're due
- Company
- Globex Corporation
- Billing email
- billing@globex.example
- Payment terms
- Net 30
Edge cases
Right to left. Narrow, the actions go under the title.
Billing details
Where invoices go, and when they're due
- Company
- Globex Corporation
- Billing email
- billing@globex.example
- Payment terms
- Net 30
Billing details
Where invoices go, and when they're due
- Company
- Globex Corporation
- Billing email
- billing@globex.example
- Payment terms
- Net 30