Foundations
Panel
Provide the shared flat, bordered, elevated, or glass surface wrapper. A nice little box to put your things in.
Curated demo
Panels provide shared flat, bordered, elevated, or glass surfaces.
Reference
Provide the shared flat, bordered, elevated, or glass surface wrapper. A nice little box to put your things in.
- Use bordered panels for reference content, elevated panels for featured content, and glass panels when you want translucent layered chrome.
- Keep structural page layout outside the panel itself.
Props
| Name | Type | Default | Description |
|---|---|---|---|
variant | 'flat' | 'bordered' | 'elevated' | 'glass' | 'flat' | The visual style of the panel. |
hover | boolean | false | Whether the panel has a hover effect. |
padding | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | 5 | Padding token index. |
class | string | — | Additional CSS classes. |
Example snippet
<Panel variant="glass" hover><p>Panel content</p></Panel>