Card

콘텐츠 블록을 담는 카드 컴포넌트입니다.

기본

card_header · card_body · card_footer 구조를 가집니다.

카드 제목

부제목 또는 메타 정보

카드 본문 영역입니다. 관련 콘텐츠, 설명, 데이터를 담을 수 있습니다.

간단

header나 footer 없이 body만 사용하는 단순 카드입니다.

알림

새로운 메시지가 도착했습니다. 확인해 주세요.

컴팩트 카드 — 좁은 패딩으로 밀도 높은 정보를 표시합니다.

스킨

기본은 테두리·그림자가 적용됩니다. variant로 외형을 조절합니다.

기본 — 테두리 · 그림자

Shadow — 그림자

Elevated — 강한 그림자

Ghost — 투명 배경

크기

size로 패딩과 제목 크기를 조절합니다.

Small

작은 카드 — 좁은 패딩과 작은 제목.

Medium

기본 크기 카드입니다.

Large

큰 카드 — 넓은 패딩과 큰 제목.

강조 테두리

card_accent와 color_*로 왼쪽 강조선을 적용합니다.

정보

시스템 업데이트가 예정되어 있습니다.

성공

작업이 정상적으로 완료되었습니다.

주의

저장 공간이 부족합니다.

오류

연결에 실패했습니다. 다시 시도해 주세요.

미디어

media prop으로 상단 이미지·썸네일(card_media) 영역을 추가합니다. Next Image도 그대로 전달할 수 있습니다.

프로젝트 Alpha

진행 중

업데이트 · 2일 전

디자인 시스템 구축 및 컴포넌트 라이브러리 개발 프로젝트입니다.

3명 참여

가로

card_horizontal로 미디어와 콘텐츠를 나란히 배치합니다. card_inner로 본문을 감쌉니다.

가이드 문서

HTML 컴포넌트 사용법과 접근성 가이드를 확인하세요.

문서 보기

웹진형

layout="webzine"은 넓은 상단 이미지와 강조된 제목·본문으로 에디토리얼 콘텐츠를 구성합니다.

도시를 바꾸는 작은 디자인

Design Journal · 2026.07.31

일상의 동선과 경험을 개선하는 공공 디자인 사례를 깊이 있게 소개합니다.

뉴스 리스트형

layout="news"는 밀도 높은 가로형 뉴스 항목을 만듭니다. 기본 이미지는 좌측이며 mediaPosition으로 우측 배치도 가능합니다.

디자인 시스템 업데이트

제품 소식 · 10분 전

접근성 토큰과 컴포넌트 API가 개선되었습니다.

새로운 가이드 공개

가이드 · 1시간 전

콘텐츠 작성과 레이아웃 원칙을 확인하세요.

이미지 좌측 · 우측

mediaPosition을 left 또는 right로 지정하면 Card가 미디어와 콘텐츠 래퍼를 자동으로 구성합니다. mediaDivider={false}로 이미지 경계선을 제거할 수 있습니다.

이미지 좌측 · 구분선 없음

미디어 다음에 콘텐츠를 배치합니다.

이미지 우측 · 구분선 없음

콘텐츠 다음에 미디어를 배치합니다.

상품 리스트형

layout="product"는 상품 이미지·설명·가격·액션을 밀도 높은 가로 목록으로 구성합니다.

라이트 러닝 재킷

무료 배송

가볍고 통기성이 좋은 데일리 러닝 재킷입니다. 생활 방수 소재를 적용했습니다.

89,000원~~109,000원~~

데일리 백팩

오늘 출발

노트북 수납과 생활 방수를 지원하는 가벼운 데일리 백팩입니다.

64,000원

내용 말줄임

CardBody의 lineClamp로 내용 영역을 1줄·2줄·3줄까지 표시한 뒤 말줄임 처리합니다.

한 줄 말줄임

디자인 시스템은 제품 전반의 일관성을 높이고 반복되는 의사결정을 줄여 팀이 더 빠르게 사용자 문제에 집중하도록 돕습니다. 구성 요소와 사용 원칙을 하나의 언어로 정리하면 디자이너와 개발자가 같은 기준으로 협업할 수 있으며, 새로운 기능을 추가할 때도 품질을 안정적으로 유지할 수 있습니다.

두 줄 말줄임

세 줄 말줄임

아이콘 · 통계

card_icon · card_stat으로 기능 소개·지표 카드를 구성합니다.

빠른 성능

가벼운 번들, 빠른 로딩

접근성

WCAG 2.2 AA 기준

월간 활성 사용자24.5K+18.2%

프로필

CardHeader extra prop으로 헤더 우측 액션(card_extra)을 배치합니다.

홍길동

프론트엔드 개발자

서울 · 온라인

justify로 좌·중앙·우·양끝 정렬하고, full로 단일 항목을 100% 확장합니다. ratio는 1:1 · 1:2 · 2:1 분할을, flush는 패딩 제거를 적용합니다.

단일 액션

균등 분할

상황별 비율

클릭 가능

as로 Next Link 또는 네이티브 button을 지정해 카드 전체를 올바른 링크·버튼으로 만듭니다.

Next.js 링크 카드

클라이언트 내비게이션으로 Avatar 문서에 이동합니다.

비활성

is-disabled로 비활성 상태를 표시합니다.

비활성 카드

현재 이용할 수 없습니다.

카드 그리드

card_deck으로 여러 카드를 그리드로 배치합니다. card_deck-2 · card_deck-3로 열 수를 조절합니다.

Feature A

빠른 성능과 가벼운 번들 크기.

Feature B

접근성을 고려한 마크업 구조.

Feature C

Pure SCSS로 커스터마이즈 가능.

API · Card Props

Prop	타입	기본값	설명
`as`	React.ElementType	—	루트 요소 또는 Next Link 같은 커스텀 컴포넌트
`variant`	'bordered' \| 'shadow' \| 'flat'	bordered	카드 스킨. flat은 card_ghost
`size`	'sm' \| 'md' \| 'lg' \| 'compact'	md	card_sm · card_lg · card_compact
`layout`	'default' \| 'webzine' \| 'news' \| 'product'	default	기본 · 웹진 · 뉴스 · 상품 리스트형 레이아웃
`mediaPosition`	'top' \| 'left' \| 'right'	top	미디어 위치. news와 product는 기본 left
`mediaDivider`	boolean	true	좌우 미디어와 콘텐츠 사이 구분선 표시
`hoverable`	boolean	false	호버 상승 효과 (card_hover)
`title`	string	—	내장 헤더 제목 (CardHeader 없이 사용 시)
`subtitle`	string	—	내장 헤더 부제
`media`	ReactNode	—	상단 미디어. Next Image를 포함한 React 노드
`header`	ReactNode	—	내장 헤더의 메인 콘텐츠
`extra`	ReactNode	—	내장 헤더 우측 액션
`tag`	string	article	하위 호환용 루트 HTML 태그. as가 우선합니다
`ripple`	boolean	—	클릭 파장(ripple). true 시 data-ripple 활성 · false 비활성. 미지정 시 비활성

API · CardHeader Props

Prop	타입	기본값	설명
`title`	string	—	제목 (card_title)
`subtitle`	string	—	부제 (card_subtitle)

API · CardBody Props

Prop	타입	기본값	설명
`lineClamp`	1 \| 2 \| 3	—	본문을 지정한 줄 수 뒤에서 말줄임

Prop	타입	기본값	설명
`justify`	'start' \| 'center' \| 'end' \| 'between'	start	푸터 항목의 가로 정렬
`ratio`	'1:1' \| '1:2' \| '2:1'	—	직접 자식 두 개의 균등·비율 분할
`full`	boolean	false	단일 직접 자식을 100% 너비로 확장
`flush`	boolean	false	푸터 패딩 제거
`between`	boolean	false	하위 호환용 양끝 정렬. justify="between" 권장

API · Card Children

Children / Prop	설명
`media`	상단·좌측·우측 미디어 영역 (Vue #media 슬롯 대응, card_media)
`header`	헤더 콘텐츠 (Vue #header 슬롯 대응, title·subtitle prop 대체)
`extra`	헤더 우측 액션 (Vue #extra 슬롯 대응, card_extra)
`children`	CardBody · CardFooter 등 (Vue default 슬롯 대응)

API · CardHeader Children

Children / Prop	설명
`children`	헤더 메인 콘텐츠 (title·subtitle prop 대체)
`extra`	헤더 우측 액션 (Vue #extra 슬롯 대응)

API · CardBody Children

Children / Prop	설명
`children`	카드 본문 (Vue default 슬롯 대응)

Children / Prop	설명
`children`	카드 푸터 (Vue default 슬롯 대응)

클래스 · 속성

React 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.

클래스	설명
`card`	카드 루트
`card_shadow · card_ghost · card_borderless`	스킨 변형
`card_sm · card_lg · card_compact`	크기·패딩
`card_webzine · card_news · card_product`	웹진형 · 뉴스형 · 상품형
`card_news-list · card_product-list`	뉴스 · 상품 목록 컨테이너
`card_media-left · card_media-right · card_media-no-divider`	미디어 좌우 배치 · 구분선 제거
`card_hover · card_clickable · card_accent`	인터랙션·강조
`card_header · card_body · card_footer · card_media`	구조 파트
`card_title · card_subtitle · card_extra`	헤더 파트
`card_body-clamp-1 · card_body-clamp-2 · card_body-clamp-3`	본문 1·2·3줄 말줄임
`card_price · card_price-original`	상품 현재가 · 원래 가격
`card_footer-start · card_footer-center · card_footer-end · card_footer-between`	푸터 가로 정렬
`card_footer-full · card_footer-flush`	단일 100% 확장 · 패딩 제거
`card_footer-ratio-1-1 · card_footer-ratio-1-2 · card_footer-ratio-2-1`	푸터 직접 자식 비율 분할
`card_deck · card_deck-2 · card_deck-3`	카드 그리드
`is-disabled`	비활성 상태
`data-ripple`	클릭 파장 활성. data-ripple="surface"는 절대 위치 보조 버튼용
`data-ripple="false"`	해당 요소 ripple 비활성
`data-no-ripple`	하위 전체 ripple 비활성

디자인 토큰

토큰	기본값	설명
`--card-padding · --card-padding-sm · --card-padding-lg`	—	카드 패딩
`--card-radius · --card-border-color · --card-shadow`	—	모서리·테두리·그림자
`--card-news-media-width · --card-product-media-width`	10rem · 8.5rem	뉴스 · 상품 이미지 너비
`--card-webzine-media-ratio`	3 / 2	웹진 이미지 비율
`--card-title-size · --card-subtitle-size`	—	제목·부제 타이포
`--card-accent-width · --card-hover-translate`	3px · -2px	강조선·호버 이동