Card
Frosted glass with a top specular. Hover deepens the shadow; nothing moves.
Examples
Cards
Frosted
Blurs whatever sits behind it.
Solid
Opt out of blur with data-solid.
Busy
Content dims; squares pulse.
Media card
Aurora 01
A leading image bleeds to the edges.
Fitted card
data-fit sizes the card to its content: a floating layer for a control in a header or toolbar.
Theme
Anatomy
.card | Any block element, usually <article>. A frosted layer with a medium shadow and the specular top edge. It is an inline-size container, so its children can use container queries. |
> img / .media / .frame | Optional. As the first child it bleeds to the card's edges, and the next child gets extra space above. |
> * | Content. Each child after the first is spaced from the one before. |
API
| Attribute | Values | Description |
|---|---|---|
data-interactive | boolean | Deepens the shadow on hover. Only the look: put a real link or button inside for the action. |
data-solid | boolean | Opaque surface, no blur. For cards over busy backgrounds or stacked on other glass. |
data-size | s | Compact card: --ae-space-4 padding. Default --ae-space-5. |
data-flush | boolean | No padding, and contents clipped to the corners, for a table or image that fills the card. |
data-fit | boolean | Shrinks the card to its content. A fitted card is no longer a size container, so container queries inside it stop applying. |
aria-busy | true | Dims and blurs the content and pulses three squares over it; the card ignores the pointer. |
data-featured | boolean | Only inside .pricing: fills the card with the tone and inverts its text. See Pricing. |
Accessibility
- A card is a plain box. Use
<article>with a heading when it stands on its own, so it shows up in heading navigation. data-interactivedoesn't make the card clickable or focusable. Put the action in a link or button inside, usually on the heading.aria-busyblocks the pointer but not the keyboard, and the dimmed content is still read out. Disable controls inside if they must not be used while loading.