shadcn.io is not affiliated with official shadcn/ui
Card examples · Standard
Image Card for React
A listing card with a full-width photo, bedroom, bathroom and area pills, and a price.
Property listings, product grids, portfolio pieces: sometimes the details matter as much as the picture. This React card puts a full-width photo between the title and a footer with three pills, bedrooms, bathrooms and area, each with an icon, and the price at the other end. Use it wherever people compare listings at a glance.
Preview
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.
