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";
const communities = [
{
title: "Indie Hackers",
members: "148 members",
byline: "By Martha",
image: "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/demo1.jpg",
imageAlt: "Indie Hackers community",
avatar: "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/red.jpg",
avatarAlt: "Martha's avatar",
},
{
title: "AI Builders",
members: "362 members",
byline: "By John",
image: "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/demo2.jpg",
imageAlt: "AI Builders community",
avatar: "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/blue.jpg",
avatarAlt: "John's avatar - blue themed",
},
];
export default function CardWithAvatarDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
<div className="flex flex-wrap justify-center gap-4">
{communities.map((community) => (
<Card className="w-[200px] gap-2" key={community.title}>
<img
alt={community.imageAlt}
className="pointer-events-none aspect-square w-14 rounded-2xl object-cover select-none"
src={community.image}
/>
<Card.Header>
<Card.Title>{community.title}</Card.Title>
<Card.Description>{community.members}</Card.Description>
</Card.Header>
<Card.Footer className="flex gap-2">
<span className="size-5 overflow-hidden rounded-full">
<img alt={community.avatarAlt} className="size-full object-cover" src={community.avatar} />
</span>
<span className="text-xs">{community.byline}</span>
</Card.Footer>
</Card>
))}
</div>
</div>
);
}
export { CardWithAvatarDemo };