Overview & Philosophy
Structural section patterns including breadcrumb navigation trails, unified section-card wrappers with distinct header/main/footer regions, toolbar layouts, and nested collapsible sections.
.breadcrumbs
<section> with .section class
User List
Section content...
.section-card
Section Title
Content with padding and border.
Inline Alert
Informational message. No action required.
Changes saved successfully.
Your session expires in 5 minutes.
Failed to save. Check your connection and try again.
Banner — .alert.banner
Flat Stack with section-card children
flat-stack works with any panel mixin that reads the logical tokens — card, section-card, stat-card, or a bare element with @include card.
Section A
First section-card in the stack.
Section B
Joined via shared block-start suppression.
Section C
No radius, no shadow, no gap.