Card

A bordered surface container. Padded by default; opt out to use the header / body slots for split layouts.

Simple

A simple bordered surface, padded.

<Card>
  Card content goes here.
</Card>

Header + Body

Profile

Two slots split by a hairline border. Good for tabular detail screens.

<Card padded={false}>
  <CardHeader><CardTitle>Profile</CardTitle></CardHeader>
  <CardBody>Body content…</CardBody>
</Card>

Grid

Habits

Identical surface, same border, same radius.

Workouts

Identical surface, same border, same radius.

Notes

Identical surface, same border, same radius.

Mira

Identical surface, same border, same radius.

<Card>…</Card>