Skip to main content
USWDS + Tailwind

Card

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

Examples

Vertical

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
Card title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo.

Flush media

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo.

Header first

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo.

card-vertical-demo.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

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
Media left

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo.

Media right

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo.

card-horizontal-demo.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

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
  • Card title 1

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo.

  • Card title 2

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo.

  • Card title 3

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo.

card-group-demo.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.

PropTypeDefaultDescription
layoutvertical | ltr | rtlverticalPlaces media above, left of, or right of the content.

Media<div>

Contains an image or other media.

PropTypeDefaultDescription
variantindent | flush | exdentindentControls 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.

Holds secondary content or actions.