Guide
Designing with warm neutrals
How Maple pairs terracotta with stone greys to keep interfaces calm but characterful.
Card
Groups related content and actions. Outlined for dense layouts, Elevated to lift featured content, Filled for quiet secondary panels.
Styles
Outlined, Elevated (Shadow/M), Filled.
Guide
Designing with warm neutrals
How Maple pairs terracotta with stone greys to keep interfaces calm but characterful.
Guide
Designing with warm neutrals
How Maple pairs terracotta with stone greys to keep interfaces calm but characterful.
<Card
variant="elevated"
media="star"
eyebrow="Guide"
title="Designing with warm neutrals"
description="…"
meta="5 min read"
link={{ label: "Read more", href: "/guide" }}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "outlined" | "elevated" | "filled" | "outlined" | Surface style. |
eyebrow | string | — | Overline label. |
title | ReactNode | — | Title. |
description | ReactNode | — | Body copy. |
media | IconName | ReactNode | — | Media area; pass an image or an icon name. |
meta | string | — | Footer meta text. |
link | { label, href } | — | Footer link. |
Usage
Do
- Use Elevated sparingly for featured content.
Don't
- Nest cards inside cards.