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¶

<div class="void-card">
  <h3>Card title</h3>
  <p>Card body text goes here.</p>
</div>

Card title

Card body text goes here.

Glass intensity¶

Cards respect the global glass setting but can be overridden per card.

<div class="void-card void-card--light">Light glass</div>
<div class="void-card void-card--medium">Medium glass</div>
<div class="void-card void-card--heavy">Heavy glass</div>

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.

<div class="void-card void-card--accent">
  <h3>Highlighted card</h3>
  <p>This card has an accent top border.</p>
</div>

Highlighted card

This card has an accent top border.

Card grid¶

The grid utility arranges cards in responsive columns with a 16 px gap.

<div class="void-card-grid">
  <div class="void-card">One</div>
  <div class="void-card">Two</div>
  <div class="void-card">Three</div>
</div>

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.