ComponentsCard
Components
Card
9px-radius surface with the site's soft ambient shadow — the base for product tiles and content panels.
Configurator
Niacinamide 10% + Zinc 1%
High-strength vitamin and mineral blemish formula.
Usage
<Card>
<CardTitle>Niacinamide 10% + Zinc 1%</CardTitle>
<CardDescription>High-strength vitamin and mineral blemish formula.</CardDescription>
<Button className="mt-6" size="sm">Add to Bag</Button>
</Card>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | Additional classes on the Card surface, merged via tailwind-merge. |
| ...props | HTMLAttributes<HTMLDivElement> | — | Any native <div> attribute. |
CardTitle and CardDescription are plain styled wrappers (h3 / p) that accept the same className + native attribute pattern.
Do's and Don'ts
Do
- ·Use Card as the base surface for any grouped content — panels, tiles, form sections.
- ·Compose it with existing primitives (Button, Badge, Rating) rather than hand-rolling new layout inside it.
Don't
- ·Don't nest a Card inside another Card — flatten the hierarchy instead.
- ·Don't override the border-radius per-instance; if 9px is wrong for a use case, that's a signal to add a new radius token, not a one-off className.