---
title: Card (React) - USWDS + Tailwind
description: Present content and related actions about one subject in cards.
  Compare vertical, horizontal, and grouped layouts.
---

# Card

Present content and related actions about one subject in cards. Compare vertical, horizontal, and grouped layouts.

## Examples

### Vertical

```tsx
import { Button } from '@uswds-tailwind/react/button'
import { Card } from '@uswds-tailwind/react/card'

export default function CardVerticalDemo() {
  return (
    <div className="grid grid-cols-1 tablet:grid-cols-2 desktop:grid-cols-3 gap-4">
      <Card.Root>
        <Card.Media>
          <img className="size-full object-cover" src="https://raw.githubusercontent.com/IHIutch/uswds-tailwind/68343230edc85966427c380f8a0442c6cbda2721/apps/docs/public/assets/images/preview.jpg" alt="" />
        </Card.Media>
        <Card.Header>
          <Card.Title>Card title</Card.Title>
        </Card.Header>
        <Card.Body>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo.</p>
        </Card.Body>
        <Card.Footer>
          <Button type="button">Visit agency</Button>
        </Card.Footer>
      </Card.Root>
      <Card.Root>
        <Card.Media variant="flush">
          <img className="size-full object-cover" src="https://raw.githubusercontent.com/IHIutch/uswds-tailwind/68343230edc85966427c380f8a0442c6cbda2721/apps/docs/public/assets/images/preview.jpg" alt="" />
        </Card.Media>
        <Card.Header>
          <Card.Title>Flush media</Card.Title>
        </Card.Header>
        <Card.Body>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo.</p>
        </Card.Body>
        <Card.Footer>
          <Button type="button">Visit agency</Button>
        </Card.Footer>
      </Card.Root>
      <Card.Root>
        <Card.Media variant="exdent" className="order-0 py-2">
          <img className="size-full object-cover" src="https://raw.githubusercontent.com/IHIutch/uswds-tailwind/68343230edc85966427c380f8a0442c6cbda2721/apps/docs/public/assets/images/preview.jpg" alt="" />
        </Card.Media>
        <Card.Header className="order-first">
          <Card.Title>Header first</Card.Title>
        </Card.Header>
        <Card.Body>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo.</p>
        </Card.Body>
        <Card.Footer>
          <Button type="button">Visit agency</Button>
        </Card.Footer>
      </Card.Root>
    </div>
  )
}
```

### Horizontal

```tsx
import { Button } from '@uswds-tailwind/react/button'
import { Card } from '@uswds-tailwind/react/card'

export default function CardHorizontalDemo() {
  return (
    <div className="space-y-4">
      <Card.Root layout="ltr">
        <Card.Media>
          <img className="size-full object-cover" src="https://raw.githubusercontent.com/IHIutch/uswds-tailwind/68343230edc85966427c380f8a0442c6cbda2721/apps/docs/public/assets/images/preview.jpg" alt="" />
        </Card.Media>
        <Card.Header>
          <Card.Title>Media left</Card.Title>
        </Card.Header>
        <Card.Body>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo.</p>
        </Card.Body>
        <Card.Footer>
          <Button type="button">Visit agency</Button>
        </Card.Footer>
      </Card.Root>
      <Card.Root layout="rtl">
        <Card.Media>
          <img className="size-full object-cover" src="https://raw.githubusercontent.com/IHIutch/uswds-tailwind/68343230edc85966427c380f8a0442c6cbda2721/apps/docs/public/assets/images/preview.jpg" alt="" />
        </Card.Media>
        <div>
          <Card.Header>
            <Card.Title>Media right</Card.Title>
          </Card.Header>
          <Card.Body>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo.</p>
          </Card.Body>
          <Card.Footer>
            <Button type="button">Visit agency</Button>
          </Card.Footer>
        </div>
      </Card.Root>
    </div>
  )
}
```

### Group

```tsx
import { Button } from '@uswds-tailwind/react/button'
import { Card } from '@uswds-tailwind/react/card'

export default function CardGroupDemo() {
  return (
    <Card.Group className="grid-cols-1 tablet:grid-cols-2 desktop:grid-cols-3">
      <li>
        <Card.Root>
          <Card.Media>
            <img className="size-full object-cover" src="https://raw.githubusercontent.com/IHIutch/uswds-tailwind/68343230edc85966427c380f8a0442c6cbda2721/apps/docs/public/assets/images/preview.jpg" alt="" />
          </Card.Media>
          <Card.Header>
            <Card.Title>Card title 1</Card.Title>
          </Card.Header>
          <Card.Body>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo.</p>
          </Card.Body>
          <Card.Footer>
            <Button type="button">Visit agency</Button>
          </Card.Footer>
        </Card.Root>
      </li>
      <li>
        <Card.Root>
          <Card.Media>
            <img className="size-full object-cover" src="https://raw.githubusercontent.com/IHIutch/uswds-tailwind/68343230edc85966427c380f8a0442c6cbda2721/apps/docs/public/assets/images/preview.jpg" alt="" />
          </Card.Media>
          <Card.Header>
            <Card.Title>Card title 2</Card.Title>
          </Card.Header>
          <Card.Body>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo.</p>
          </Card.Body>
          <Card.Footer>
            <Button type="button">Visit agency</Button>
          </Card.Footer>
        </Card.Root>
      </li>
      <li>
        <Card.Root>
          <Card.Media>
            <img className="size-full object-cover" src="https://raw.githubusercontent.com/IHIutch/uswds-tailwind/68343230edc85966427c380f8a0442c6cbda2721/apps/docs/public/assets/images/preview.jpg" alt="" />
          </Card.Media>
          <Card.Header>
            <Card.Title>Card title 3</Card.Title>
          </Card.Header>
          <Card.Body>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo.</p>
          </Card.Body>
          <Card.Footer>
            <Button type="button">Visit agency</Button>
          </Card.Footer>
        </Card.Root>
      </li>
    </Card.Group>
  )
}
```

## Component API

Build a card with Root and its media, header, title, body, and footer parts. Group multiple cards with Group.

### Group `<ul>`

Lays out a collection of cards. Put each Root inside an li.

### Root `<div>`

Controls card orientation.

| Prop | Type | Default | Description |
| - | - | - | - |
| `layout` | `vertical \| ltr \| rtl` | `vertical` | Places media above, left of, or right of the content. |

### Media `<div>`

Contains an image or other media.

| Prop | Type | Default | Description |
| - | - | - | - |
| `variant` | `indent \| flush \| exdent` | `indent` | Controls how the media meets the card edge. |

### Header `<div>`

Groups the card title and introductory content.

### Title `<div>`

Styles the card title; place a heading or link inside as needed.

### Body `<div>`

Put the main card content below Header.

### Footer `<div>`

Holds secondary content or actions.