Components
Loading preview...
Flexible container component for grouping related content and actions.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-cardimport { Card } from "@/components/ui/heroui-card";
function ActionButton({ children }: { children: React.ReactNode }) {
return (
<button className="rounded-full bg-zinc-950 px-3 py-2 text-xs font-medium text-white dark:bg-white dark:text-zinc-950" type="button">
{children}
</button>
);
}
function CloseButton({ label }: { label: string }) {
return (
<button
aria-label={label}
className="inline-flex size-7 items-center justify-center rounded-full text-zinc-500 hover:bg-zinc-100 dark:text-zinc-400 dark:hover:bg-white/10"
type="button"
>
<svg aria-hidden="true" fill="none" viewBox="0 0 16 16" className="size-4">
<path
clipRule="evenodd"
d="M3.47 3.47a.75.75 0 0 1 1.06 0L8 6.94l3.47-3.47a.75.75 0 1 1 1.06 1.06L9.06 8l3.47 3.47a.75.75 0 1 1-1.06 1.06L8 9.06l-3.47 3.47a.75.75 0 0 1-1.06-1.06L6.94 8 3.47 4.53a.75.75 0 0 1 0-1.06Z"
fill="currentColor"
fillRule="evenodd"
/>
</svg>
</button>
);
}
export default function CardWithImagesDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-4">
<div className="grid w-full max-w-3xl grid-cols-12 gap-3">
<Card className="col-span-12 flex h-auto flex-col p-3 sm:flex-row">
<div className="relative h-[140px] w-full shrink-0 overflow-hidden rounded-2xl sm:h-[120px] sm:w-[120px]">
<img
alt="Cherries"
className="pointer-events-none absolute inset-0 h-full w-full scale-125 object-cover select-none"
src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/cherries.jpeg"
/>
</div>
<div className="flex flex-1 flex-col gap-3">
<Card.Header className="gap-1">
<Card.Title className="pr-8">Become an ACME Creator!</Card.Title>
<Card.Description>
Lorem ipsum dolor sit amet consectetur. Sed arcu donec id aliquam dolor sed amet faucibus etiam.
</Card.Description>
<div className="absolute right-3 top-3">
<CloseButton label="Close banner" />
</div>
</Card.Header>
<Card.Footer className="mt-auto flex w-full flex-col items-start gap-3 sm:flex-row sm:items-center sm:justify-between">
<div className="flex flex-col">
<span className="text-sm font-medium">Only 10 spots</span>
<span className="text-xs text-zinc-500 dark:text-zinc-400">Submission ends Oct 10.</span>
</div>
<ActionButton>Apply Now</ActionButton>
</Card.Footer>
</div>
</Card>
<div className="col-span-12 grid grid-cols-2 gap-3 lg:col-span-6">
<Card className="col-span-2 p-3">
<div className="absolute right-3 top-3 z-10">
<CloseButton label="Close notification" />
</div>
<Card.Header>
<span className="text-xs font-medium uppercase tracking-[0.18em] text-zinc-500 dark:text-zinc-400">PAYMENT</span>
<Card.Title>You can now withdraw on crypto</Card.Title>
<Card.Description>Add your wallet in settings to withdraw</Card.Description>
</Card.Header>
<Card.Footer>
<a className="text-sm font-medium text-blue-600 dark:text-blue-400" href="#">
Go to settings
</a>
</Card.Footer>
</Card>
<Card className="col-span-1 gap-2 p-3">
<span className="size-12 overflow-hidden rounded-2xl">
<img alt="Demo 1" className="size-full object-cover" src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/demo1.jpg" />
</span>
<Card.Header>
<Card.Title>Indie Hackers</Card.Title>
<Card.Description>148 members</Card.Description>
</Card.Header>
<Card.Footer className="flex gap-2">
<img alt="John" className="size-5 rounded-full object-cover" src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/red.jpg" />
<span className="text-xs">By John</span>
</Card.Footer>
</Card>
<Card className="col-span-1 gap-2 p-3">
<span className="size-12 overflow-hidden rounded-2xl">
<img alt="Demo 2" className="size-full object-cover" src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/demo2.jpg" />
</span>
<Card.Header>
<Card.Title>AI Builders</Card.Title>
<Card.Description>362 members</Card.Description>
</Card.Header>
<Card.Footer className="flex gap-2">
<img alt="John" className="size-5 rounded-full object-cover" src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/blue.jpg" />
<span className="text-xs">By Martha</span>
</Card.Footer>
</Card>
</div>
<div className="col-span-12 grid grid-cols-2 gap-3 lg:col-span-6">
<Card className="col-span-1 overflow-hidden p-0">
<div className="relative h-36">
<img alt="NEO Home Robot" className="absolute inset-0 h-full w-full object-cover" src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/neo2.jpeg" />
<div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 to-transparent p-4 text-white">
<Card.Title className="text-white">NEO</Card.Title>
<Card.Description className="text-white/80">Home Robot</Card.Description>
<span className="mt-2 block text-xs">Available soon</span>
</div>
</div>
<Card.Footer className="justify-between p-4">
<span className="text-xs font-medium">Get notified</span>
<ActionButton>Notify me</ActionButton>
</Card.Footer>
</Card>
<Card className="col-span-1 overflow-hidden p-0">
<div className="relative h-36">
<img alt="NEO Home Robot" className="absolute inset-0 h-full w-full object-cover" src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/neo1.jpeg" />
<div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 to-transparent p-4 text-white">
<Card.Title className="text-white">NEO</Card.Title>
<Card.Description className="text-white/80">$499/m</Card.Description>
</div>
</div>
<Card.Footer className="justify-end p-4">
<ActionButton>Get now</ActionButton>
</Card.Footer>
</Card>
{[
["Bridging the Future", "Today, 6:30 PM", "Futuristic Robot", "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/robot1.jpeg"],
["Avocado Hackathon", "Wed, 4:30 PM", "Avocado", "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/avocado.jpeg"],
["Sound Electro | Beyond art", "Fri, 8:00 PM", "Sound Electro event", "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/oranges.jpeg"],
].map(([title, time, alt, src]) => (
<Card className="col-span-2 flex-row items-center gap-3 p-3" key={title}>
<img alt={alt} className="aspect-square h-12 w-12 shrink-0 rounded-xl object-cover select-none" src={src} />
<div>
<Card.Title>{title}</Card.Title>
<Card.Description>{time}</Card.Description>
</div>
</Card>
))}
</div>
</div>
</div>
);
}
export { CardWithImagesDemo };