Image Card

이미지와 설명을 독립적인 콘텐츠 하나로 묶어 보여 줄 때 사용합니다.

미리보기

워크스페이스 표지

표지 이미지에 대체 텍스트와 짧은 디자인 시스템 설명을 연결합니다.

미리보기를 불러오는 중입니다.

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/image-card

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

Registry JSON

사용법

실제 이미지 주소와 의미 있는 alt를 제공하고 맥락이 필요하면 caption을 추가하세요. 이미지 전송과 최적화는 앱에서 관리합니다.

import { ImageCard } from "@/components/ui/image-card";

export default function Example() {
  return <ImageCard src="/workspace.jpg" alt="A shared workspace" caption="Our design studio" />;
}

API 레퍼런스

표준 img와 figure/figcaption 의미를 유지하면서 이미지와 설명을 뉴모피즘 surface로 묶습니다. 이미지 로딩·최적화는 애플리케이션이나 프레임워크가 소유하고, 이 컴포넌트는 콘텐츠 구조와 표면만 제공합니다.

컴포넌트	속성	타입	기본값	설명
`ImageCard`	`src`필수	`string`	`—`	표시할 이미지 URL입니다.
`ImageCard`	`alt`필수	`string`	`—`	이미지의 목적을 설명하는 대체 텍스트입니다.
`ImageCard`	`caption`	`ReactNode`	`—`	선택적인 figcaption 콘텐츠입니다.
`ImageCard`	`imageClassName`	`string`	`—`	기본 aspect와 object-fit 스타일을 확장합니다.
`ImageCard`	`figure props`	`React.ComponentProps<"figure">`	`—`	figure에 표준 HTML 속성을 전달합니다.

미리보기

워크스페이스 표지

설치

사용법

API 레퍼런스

접근성