Card
Container for grouped content — title, body, media, and footer.
Usage
{% include components/card.html
title="Feature"
subtitle="Optional subtitle"
body="Description text goes here."
elevated=true
hoverable=true
glare=true
border_beam=true
%}
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
title |
string | — | Card heading |
subtitle |
string | — | Secondary text under title |
body |
string | — | Main content (HTML allowed) |
footer |
string | — | Footer content |
media |
string | — | Image URL |
media_alt |
string | "" |
Image alt text |
hoverable |
boolean | false | Lift and elevate on hover |
glare |
boolean | false | Show pointer-tracked glare on hover/focus |
border_beam |
boolean | false | Add a slow animated border accent |
elevated |
boolean | false | Stronger shadow |
borderless |
boolean | false | No border |
class |
string | — | Extra classes |
id |
string | — | Element id |
Example
Elevated
Card with elevated shadow.
Hoverable + glare
Move the pointer over this card.
Border beam
A featured card with a warm border accent.
Accessibility
Uses <article> semantics. Provide meaningful titles. Decorative images should use empty alt.