Johnson & Johnson
Technology Services
PN

Card

A surface for related content. Aligned with J&J DS v1.2. Exports from @jnj/design-system/card. Parts: Card, CardHeader,CardMeta, CardTitle, CardDescription,CardBody, CardFooter. Specializations: MediaCard,SelectableCard.

Content card

The canonical content card: category + date meta, title, description, CTA. Matches the Figma content-card pattern (node 13826:68696).

CategoryJuly 31, 2025

Heading text

Description text goes here. Lorem ipsum dolor sit amet consectetur. In placerat mauris tempus phoretra blandit felis. Nisl ullamcorper purus.

CategoryJuly 31, 2025

Heading text

Description text goes here. Lorem ipsum dolor sit amet consectetur. In placerat mauris tempus phoretra blandit felis. Nisl ullamcorper purus.

Show source
<Card>
  <CardHeader>
    <CardMeta category="Category" date="July 31, 2025" />
    <CardTitle>Heading text</CardTitle>
    <CardDescription>Description text goes here.</CardDescription>
  </CardHeader>
  <CardFooter className="justify-start border-0 pt-0">
    <Button size="sm">Read more <Icon icon={ArrowRight} size="xs" /></Button>
  </CardFooter>
</Card>

Interactive card

Set interactive to make the card hoverable/focusable. Wrap in an `<a>` or `<button>` (via asChild pattern) to make it linkable.

Patient 12384

Last seen 2 hours ago

Patient 12385

Last seen yesterday

Patient 12386 (selected)

Last seen 3 days ago

Show source
<Card interactive tabIndex={0} onClick={…}>
  <CardHeader>
    <CardTitle>Patient 12384</CardTitle>
    <CardDescription>Last seen 2 hours ago</CardDescription>
  </CardHeader>
</Card>

SelectableCard — checkbox (multi-select)

Each card has an independent checkbox at the top-right. Click anywhere on the card to toggle.

Show source
<SelectableCard
  selectionMode="checkbox"
  checked={checked.includes("a")}
  onCheckedChange={() => toggle("a")}
  aria-label="Option A"
>
  <div className="p-5">
    <CardMeta category="Category" date="July 31, 2025" />
    <h3 className="[font-size:var(--fs-heading-sm)] font-semibold">Heading text</h3>
    <p className="[font-size:var(--fs-body-sm)] text-jj-text-02">Description.</p>
  </div>
</SelectableCard>

SelectableCard — radio (exclusive)

Only one card in the group can be selected. Use name to group radio inputs.

Show source
<SelectableCard
  selectionMode="radio"
  name="plan"
  value="pro"
  checked={plan === "pro"}
  onCheckedChange={() => setPlan("pro")}
  aria-label="Pro"
>
  …
</SelectableCard>

Disabled selectable

Set disabled to fade the card and block interaction.

Show source
<SelectableCard selectionMode="checkbox" disabled aria-label="Disabled">…</SelectableCard>

Classic card — title / description / body / footer

The original Card parts stay available for generic content with action buttons.

Cardiac rhythm

Patient 12384 — last 24h

Stable sinus rhythm. No anomalies detected.

Show source
<Card>
  <CardHeader>
    <CardTitle>Cardiac rhythm</CardTitle>
    <CardDescription>Patient 12384 — last 24h</CardDescription>
  </CardHeader>
  <CardBody>…</CardBody>
  <CardFooter>
    <Button variant="ghost" size="sm">View report</Button>
  </CardFooter>
</Card>

Media card

Card with a leading media region (image, chart, gradient).

Q4 Launch briefing

16:9 media card.

Horizontal

Media on the left, content on the right.

Show source
<MediaCard
  media={<AspectRatio ratio={16 / 9}>…</AspectRatio>}
>
  <div className="p-5">
    <CardTitle>Q4 Launch briefing</CardTitle>
    <CardDescription>16:9 media</CardDescription>
  </div>
</MediaCard>