Card
Import
<link rel="stylesheet" href="/guide/css/base/index.css" /> <link rel="stylesheet" href="/guide/css/components/card.css" />
Live
Title
Description
Title
Description
Title
Description
Variants
Image + Footer
Title
Description
Image / No Footer
Title
Description
No Image / No Footer
Title
Description
Specs
| Size | Width | Image Height | Title | Desc / Footer | Preview |
|---|---|---|---|---|---|
| Small | 200px | 110px | 16px (body-sm) | 14px (label) |
Title Description |
| Medium (Default) | 320px | 180px | 18px (body-base) | 16px (body-sm) |
Title Description |
| Large | 450px | 250px | 18px (body-base) | 16px (body-sm) |
Title Description |
Code
<!-- Medium (Default) -->
<div class="card">
<div class="card__image"></div>
<div class="card__content">
<p class="card__title">Title</p>
<p class="card__desc">Description</p>
<p class="card__footer">Footer</p>
</div>
</div>
<!-- Small -->
<div class="card card--sm">...</div>
<!-- Large -->
<div class="card card--lg">...</div>
<!-- Image 없이 -->
<div class="card">
<div class="card__content">
<p class="card__title">Title</p>
<p class="card__desc">Description</p>
</div>
</div>
Classes
| 클래스 | 타입 | 설명 |
|---|---|---|
| .card | 루트 | 카드 래퍼 — 기본 320px (Medium) |
| .card--sm | 수정자 | Small — 200px · image 110px · text 16/14px |
| .card--lg | 수정자 | Large — 450px · image 250px |
| .card__image | 요소 | 이미지 영역 플레이스홀더 (생략 가능) |
| .card__content | 요소 | 텍스트 영역 래퍼 — padding 16px · gap 8px |
| .card__title | 요소 | 제목 — 18px (md/lg) / 16px (sm) |
| .card__desc | 요소 | 설명 — 16px (md/lg) / 14px (sm) |
| .card__footer | 요소 | 하단 텍스트 — 16px (md/lg) / 14px (sm) · 생략 가능 |