# Cards
Cards are the primary content container in Void. Every card uses the glass
system to sit above the canvas with blur, border, and padding baked in.
## Default card
```html
Card title
Card body text goes here.
```
Card title
Card body text goes here.
## Glass intensity
Cards respect the global glass setting but can be overridden per card.
```html
Light glass
Medium glass
Heavy glass
```
Light — 6 px blur, good for sidebars and large panels.
Medium — default blur, suitable for most content.
Heavy — 40 px blur, ideal for modals and floating panels.
## Accent border
Add a 2 px solid accent top border to draw attention.
```html
Highlighted card
This card has an accent top border.
```
Highlighted card
This card has an accent top border.
## Card grid
The grid utility arranges cards in responsive columns with a 16 px gap.
```html
```
First card
Auto-fill with minmax(260px, 1fr) handles reflow without media queries.
Second card
Each card grows to fill available space inside its column.
Third card
The 16 px gap keeps everything breathable.
## Hover effect
Cards gain a subtle background and border-color change on hover. No
`transform: translateY()` is used, so there is no layout shift.
## Notes
- Cards have 20 px padding, a 12 px border radius, and 1 px border by default.
- Avoid nesting heavy glass cards inside other glass cards; layered blur can
cause visual artifacts on some browsers.