Skip to content

CardContent — spec

Synthesized from MUI CardContent. The body region of a Card. Provides the default padding so card body content aligns with the card's grid.

When to use

  • Inside every Card that has body content beyond a hero image.
  • For media-only cards (CardMedia only), skip CardContent.

Anatomy

┌────────────────────────────┐
│ [CardMedia / image]        │
├────────────────────────────┤
│ CardContent                │
│   - Title                  │
│   - Body text              │
│   - Tags / metadata        │
├────────────────────────────┤
│ CardActions                │
└────────────────────────────┘

API

<Card>
  <CardContent>
    <Typography variant="h5">제목</Typography>
    <Typography variant="body2">본문 텍스트</Typography>
  </CardContent>
</Card>
Prop Type Default Description
children ReactNode — Body content

Tokens consumed

--card-content-padding   /* default 16px / dense 8px */
--space-md
--space-sm

Accessibility

CardContent is structural (a <div>); it doesn't add semantics. The Card's role is determined by its surrounding context — wrap interactive cards in <a> or <button> higher in the tree, not at CardContent level.

Edge cases

  • Card with no media — CardContent becomes the only child; ensure padding still feels right (default 16px works).
  • Korean text density — Hangul reads ~10% wider; consider 20-24px padding for body-heavy cards.
  • Bottom padding — when CardActions follows, MUI removes the bottom padding of CardContent so the action row hugs the bottom. Don't override this without reason.

Code example

<Card sx={{ maxWidth: 360 }}>
  <CardMedia component="img" image="/cover.jpg" alt="" />
  <CardContent>
    <Typography variant="h6">제목</Typography>
    <Typography variant="body2" color="text.secondary">
      본문 요약 텍스트.
    </Typography>
  </CardContent>
  <CardActions>
    <Button size="small">자세히</Button>
  </CardActions>
</Card>

Don't

  • Don't override the bottom padding when followed by CardActions — MUI handles this.
  • Don't put Card-level interactive surfaces (link, click handler) on CardContent — they belong on the Card or on CardActionArea.

References

Cross-reference