Card
A content container that groups related information. Cards separate from the page by surface colour rather than a border: a recessed tray on the page, a raised surface on a tray section.
Usage
Usage resets on the first of each month.
<Card>
<Heading level={3} size="lg">Usage</Heading>
<Text size="sm">Usage resets on the first of each month.</Text>
</Card>Import
import { Card } from "@merid/react";Examples
Variants
tray (default) is the recessed card for use directly on the page. outline is a hairline card for when a tray would clash with its surroundings.
Tray
Usage resets on the first of each month.
Outline
Usage resets on the first of each month.
<Card variant="tray">…</Card>
<Card variant="outline">…</Card>Elevated, on a tray section
elevated is surface plus a soft shadow. Use it when the card sits on a tray Section. A tray card inside a tray section flips to this look automatically.
Elevated
Usage resets on the first of each month.
<Section tone="tray">
<Card variant="elevated">…</Card>
</Section>Padding
none 0, sm 20px, md 28px (default), lg 32px. Use none when the card holds a full-bleed image or table.
sm · 20px
md · 28px
lg · 32px
<Card padding="sm">sm · 20px</Card>
<Card padding="md">md · 28px</Card>
<Card padding="lg">lg · 32px</Card>Interactive and selected
interactive adds a 3px hover lift and a pointer cursor; use it when the whole card is a link or button, and render it as that element with as. selected draws the 1.5px accent ring.
<Card as="a" href="/plans/starter" interactive>…</Card>
<Card as="a" href="/plans/pro" interactive selected aria-current="true">…</Card>API reference
Renders a div unless as is given; forwards its ref and passes all HTML attributes through.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "tray" | "elevated" | "outline" | "tray" | Surface. tray on the page, elevated on a tray section, outline is a hairline card. |
padding | "none" | "sm" | "md" | "lg" | "md" | Inner padding: 0, 20px, 28px, 32px. |
interactive | boolean | false | Adds hover lift (3px) and pointer cursor. Use when the whole card is a link or button. |
selected | boolean | – | Draws the 1.5px accent selection ring. On an `interactive` card rendered `as="button"` it also sets `aria-pressed`; otherwise it is visual only. |
as | ElementType | "div" | Element or component to render instead of a div. |
Styling
| Hook | Values |
|---|---|
.mrd-card | Root element |
data-variant | tray · elevated · outline |
data-padding | none · sm · md · lg |
data-interactive | Present when interactive |
data-selected | Present when selected |
Component variable: --mrd-card-padding, set per data-padding.
.pricing .mrd-card {
--mrd-card-padding: var(--mrd-space-10);
}Accessibility
- A card has no role of its own. Give a group of cards a heading, and start each card with a heading at the right level.
- For a clickable card, render it as the interactive element (
as="a"oras="button") rather than wrapping adivin anonClick. selectedsetsaria-pressedonly when the card isinteractiveand renderedas="button"(a toggle button). Otherwise it is visual only: convey the state witharia-currenton a link, or a checked control.
Guidelines
Do
Match the surface to the background: tray cards on the page, elevated cards on a tray section.
Avoid
Add borders and shadows to a tray card to make it “pop”, or nest cards more than one level deep.
Related
- Section — tray bands that change how cards look.
- Grid — lays out rows of cards.
- EmptyState — placeholder for an empty card list.