Image Card

image
Image

Installation

via Shadcn cli

pnpm dlx shadcn@latest add https://neobrutalism.dev/r/image-card.json

Manually

components/ui/image-card.tsx
type Props = {
  imageUrl: string
  caption: string
}


export default function ImageCard({ imageUrl, caption }: Props) {
  return (
    <figure className="w-[250px] overflow-hidden rounded-base border-2 border-border bg-main font-base shadow-shadow">
      <img className="w-full aspect-[4/3]" src={imageUrl} alt="image" />
      <figcaption className="border-t-2 text-mtext border-border p-4">
        {caption}
      </figcaption>
    </figure>
  )
}

Usage

import ImageCard from '@/components/ui/image-card'

<ImageCard
  caption="Image"
  imageUrl="https://hips.hearstapps.com/hmg-prod/images/flowers-trees-and-bushes-reach-their-peak-of-full-bloom-in-news-photo-1678292967.jpg?resize=300:*"
></ImageCard>
Edit this page