# Panel

Provide the shared flat, bordered, elevated, or glass surface wrapper. A nice little box to put your things in.

## Notes

- 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.

## Properties

| 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

```astro
<Panel variant="glass" hover><p>Panel content</p></Panel>
```