Components · Display

Card

정보 묶음의 단위. 5종 변종 + inverted. 그라데이션 변종(card-soft/sky/diag)은 사용자 명시 요청 시에만.

Preview

.card

기본 흰 카드 + soft 그림자.

.card-soft

canvas → light-grey 워시.

.card-sky

canvas → sky-light 워시.

.card-diag

135° 대각선 워시.

.card-light

light-grey flat.

.card-inverted

ink-deep 카드.

Usage

<div class="card">...</div>
<div class="card card-soft">...</div>
<div class="card card-sky">...</div>
<div class="card card-diag">...</div>
<div class="card card-light">...</div>
<div class="card card-inverted">...</div>

Rules

DO

기본은 단색 .card.
카드 상하 padding 대칭 (flex column + gap).

DON'T

카드 안에 카드 nest 금지 — 그림자 중첩.
자식 margin으로 간격 만들지 말 것.
그라데이션 카드를 사용자 요청 없이 임의 사용 금지.