Layout Structures
Grids, columns, and spatial arrangements
3 patterns available
``` ▶ What is the refund policy? — When you request a refund, ... ▶ How do I change my plan? — Go to account settings → Billing. ```
Accordion
Collapsible panels that expand to reveal content, useful for FAQs and dense regions
--accordion--collapse--expand+1
``` [Overview] [Details] [History] [Settings] ──────────────────────────────────────── Panel content for the currently active tab goes here. ```
Tabs
Tabbed navigation for switching between related content panels
--tabs--panels--navigation+1
``` ┌────────────────────────────────────────────┐ │ Header │ ├──────────────┬──────────────────────────────┤ │ │ │ │ Sidebar │ Main Content │
Two-Column Layout
Side-by-side content arrangement with a main content area and secondary sidebar or complementary section
--layout--two-column--grid+3