Skip to content

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

Free

Image Card for Solid

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.

UI library: Ark UI

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. Ark UI in Solid does not crop the photo to one shape.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<Card class="w-full max-w-md">
    <CardHeader>
      <CardTitle>3-Bedroom House</CardTitle>
      <CardDescription>
        A luxurious 3-bedroom house with a modern design.
      </CardDescription>
    </CardHeader>
    <CardContent class="p-0">
      <img alt="" class="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 class="flex-wrap justify-between gap-4">
      <div class="flex items-center gap-2">
        <div class="flex items-center gap-2 rounded-full border px-4 py-2">
          <BedIcon aria-hidden="true" class="size-4" />
          <span class="sr-only">Bedrooms:</span>
          <span class="font-medium text-sm">3</span>
        </div>
        <div class="flex items-center gap-2 rounded-full border px-4 py-2">
          <BathIcon aria-hidden="true" class="size-4" />
          <span class="sr-only">Bathrooms:</span>
          <span class="font-medium text-sm">2</span>
        </div>
        <div class="flex items-center gap-2 rounded-full border px-4 py-2">
          <MaximizeIcon aria-hidden="true" class="size-4" />
          <span class="sr-only">Area:</span>
          <span class="font-medium text-sm">240m²</span>
        </div>
      </div>
      <p class="font-bold text-2xl">$425,000</p>
    </CardFooter>
  </Card>

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