Containers & Overlays
Container and overlay components group related content or present layered UI above the page.
What this category contains
Containers establish visual boundaries. Overlays must manage focus, escape dismissal, and background interaction according to pattern requirements.
Status
Card, Dialog, Drawer, Popover, and Accordion are implemented in Beta.
Accessibility considerations
Dialogs and drawers require focus management and accessible names. Clickable cards need a single clear interactive target.
Implemented components (5)
- Cardbeta
Card is a general-purpose content container grouping related information with a clear visual boundary.
- Accordionbeta
Accordion is a set of stacked collapsible sections for progressive disclosure, built from Accordion Item building blocks.
- Dialogbeta
Dialog is a modal overlay that interrupts workflow for focused attention, information, or a decision.
- Popoverbeta
Popover is a non-modal floating panel for supplementary or lightly interactive content anchored to a trigger.
- Drawerbeta
Drawer is an edge-anchored modal panel for supplementary settings, filters, or secondary forms.