Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Image Card for React

A listing card titled 3-Bedroom House, with a full-width photo, pills for 3 bedrooms, 2 bathrooms and 240m², and a price of $425,000.

The title is 3-Bedroom House, with a one-line description under it. A full-width photo follows. The footer has pills for 3 bedrooms, 2 bathrooms and 240m², and the price $425,000.

Use a photo card when people compare listings at a glance. An Item with a header image is denser in a tight grid. Base UI in React does not crop the photo to one shape.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Card anatomy: root, header, title, description, action, content, footer

Usage

<Card className="w-full max-w-md">
  <CardHeader>
    <CardTitle>3-Bedroom House</CardTitle>
    <CardDescription>
      A luxurious 3-bedroom house with a modern design.
    </CardDescription>
  </CardHeader>
  <CardContent className="p-0">
    <img
      alt=""
      className="aspect-3/2 w-full object-cover"
      height={1380}
      src="https://images.unsplash.com/photo-1570129477492-45c003edd2be?q=80&w=2070&auto=format&fit=crop"
      width={2070}
    />
  </CardContent>
  <CardFooter className="flex-wrap justify-between gap-4">
    <div className="flex items-center gap-2">
      <div className="flex items-center gap-2 rounded-full border px-4 py-2">
        <BedIcon aria-hidden="true" className="size-4" />
        <span className="sr-only">Bedrooms:</span>
        <span className="font-medium text-sm">3</span>
      </div>
      <div className="flex items-center gap-2 rounded-full border px-4 py-2">
        <BathIcon aria-hidden="true" className="size-4" />
        <span className="sr-only">Bathrooms:</span>
        <span className="font-medium text-sm">2</span>
      </div>
      <div className="flex items-center gap-2 rounded-full border px-4 py-2">
        <MaximizeIcon aria-hidden="true" className="size-4" />
        <span className="sr-only">Area:</span>
{/* The rest of the file is under Installation. */}

FAQ

How does the photo reach the card's edges?

It sits in CardContent with p-0, which removes the side insets, and the card clips it to its rounded corners. The header and the footer keep their own padding.

How do I put the photo at the top instead?

Make the img the card's first child, before CardHeader. The card then drops its top padding and rounds the photo's top corners.

What are the three pills?

Each is a rounded-full border row with px-4 py-2: an icon (BedIcon, BathIcon, MaximizeIcon) and a text-sm value, 3, 2 and 240m². Each has a visually hidden name, so a screen reader hears Bedrooms: 3 rather than just 3.

How is the price laid out?

The footer is justify-between, with the pills on one side and the price, $425,000 in font-bold text-2xl, on the other. flex-wrap and gap-4 put the price on its own line when the card is too narrow.

How do I keep every photo the same shape?

The img has aspect-3/2 w-full object-cover, so any photo is cropped to 3:2 and cards in a grid line up. Change the ratio, such as aspect-video, to suit your pictures.

What should the image's alt say?

The demo leaves alt empty, so assistive tech skips the photo and the title names the listing. Describe the photo in alt when it shows something the text doesn't.

API Reference

Card

No extra props in this demo. The rest is on the Card page.

All 4 card examples