Card
stableserver-safe
A surface, a hairline, and nothing else. Depth is one step on the neutral ramp — there is no elevation ramp and no shadow, which is why each theme's ramp has eleven steps.
Flat and raised
On the ground
The default. Use inside an already-raised surface.
Raised
One tone step up, with a stronger hairline. No shadow.
<Card>
<CardTitle>On the ground</CardTitle>
<CardBody>The default.</CardBody>
</Card>
<Card raised>…</Card>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| raised | boolean | false | Move up one tone step, to --plane-alt. |
| flush | boolean | false | Drop the padding, for an edge-to-edge table or image. |
Guidance
Do
- Nest at most one level. Past that the tone steps run out and the hierarchy stops reading.
Don't
- Don't reach for a shadow to separate a card from the page — that's what the hairline and the tone step are for.