Components · 컨테이너

Card (카드)

정보를 한 덩어리로 묶는 기본 컨테이너. 기본 / 액센트(상단 틸 보더) / 다크(네이비) 3변형.

정의

관련 정보 한 묶음을 경계·그림자로 구획해 담는 컨테이너 컴포넌트다.

Anatomy

부위	토큰
① 컨테이너	bg `--card-bg` · 보더 `--card-border`(1px) · 모서리 `--card-radius` · 그림자 `--card-shadow`
② 액센트 보더(선택)	`--card-accent-border` 상단 3px — Accent 변형에서만
③ 콘텐츠	패딩 `--card-pad`, 제목 `--text-h4`, 본문 `--text-body`

변형

변형	용도
기본	일반 정보 그룹(목록·소개·요약)
Accent	강조하고 싶은 카드 1~2개(상단 틸 보더) — 남발 금지
Dark	네이비 면 위 반전 카드(표지·CTA 구역) — 제목 흰색, 본문 `--card-dark-fg`

상태

상태	값
Default	bg `--card-bg` · border `--card-border` · shadow `--card-shadow`
Hover(링크 카드만)	shadow `--card-shadow-hover` + `translateY(calc(var(--space-1) * -1))`
Focus(링크 카드만)	`box-shadow: var(--focus-ring)`

Do / Don't

카드 하나에 메시지 하나 — 제목·본문·(선택)액션의 단순 구조를 유지한다.
카드 그리드 간격은 --space-5(16px)로 통일한다.
카드 전체가 클릭 대상이면 <a>로 감싸고 hover·focus 상태를 붙인다.

Don't

카드 안에 카드를 중첩하지 말 것 — 계층이 필요하면 Accordion을 쓴다.
그림자를 elevation 3~4로 키우지 말 것 — 카드면 0~2 안에서(떠 있는 건 Modal·Toast).
한 그리드에서 Accent 카드를 절반 이상 쓰지 말 것 — 강조가 사라진다.

콘텐츠 규칙

제목은 명사구 1줄(≤12자 권장), 본문은 2~3문장 안에서 끝낸다.
본문이 길어지면 카드를 나누거나 "자세히 보기" Link로 상세에 위임한다.
숫자 강조가 목적이면 Card가 아니라 KPI 컴포넌트를 쓴다.

키보드 인터랙션

키	동작
`Tab`	링크 카드(또는 카드 내부 액션)로 포커스 이동
`Enter`	링크 카드 열기

정적(비링크) 카드는 해당 없음 — 포커스를 받지 않는다.

접근성

링크 카드는 카드 전체를 <a>로 — 안에 별도 링크·버튼을 중첩하지 않는다(중첩 인터랙티브 금지).
제목은 문서 아웃라인에 맞는 헤딩 레벨(h3/h4)로 — 시각 크기는 토큰이 결정한다.
Dark 변형 본문 --card-dark-fg는 네이비 위 대비 AA 확보값 — 임의로 더 흐리게 하지 말 것.

코드

디자인구독

매월 필요한 디자인을 정액으로 받아 보는 구독 서비스입니다.

안전시설관리 구독

노면표시·안전표지를 정기 점검하고 교체까지 관리합니다.

GREENGUARD GOLD

UL 2818 인증 친환경 라텍스 잉크로 제작합니다.

html

<article class="pi-card">
  <h3 class="pi-card__title">디자인구독</h3>
  <p class="pi-card__body">매월 필요한 디자인을 정액으로 받아 보는 구독 서비스입니다.</p>
</article>

<article class="pi-card pi-card--accent">
  <h3 class="pi-card__title">안전시설관리 구독</h3>
  <p class="pi-card__body">노면표시·안전표지를 정기 점검하고 교체까지 관리합니다.</p>
</article>

<article class="pi-card pi-card--dark">
  <h3 class="pi-card__title">GREENGUARD GOLD</h3>
  <p class="pi-card__body">UL 2818 인증 친환경 라텍스 잉크로 제작합니다.</p>
</article>

css

.pi-card {
  background: var(--card-bg);
  border: var(--border-thin) solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-pad);
  box-shadow: var(--card-shadow);
  word-break: keep-all;
}
.pi-card__title {
  font: var(--text-h4);
  letter-spacing: var(--text-h4-letter-spacing);
  color: var(--color-text-heading);
  margin: 0 0 var(--space-3);
}
.pi-card__body {
  font: var(--text-body);
  letter-spacing: var(--text-body-letter-spacing);
  color: var(--color-text-secondary);
  margin: 0;
}

.pi-card--accent { border-top: var(--border-thick) solid var(--card-accent-border); }

.pi-card--dark { background: var(--card-dark-bg); border-color: transparent; }
.pi-card--dark .pi-card__title { color: var(--color-white); }
.pi-card--dark .pi-card__body { color: var(--card-dark-fg); }

a.pi-card {
  display: block; text-decoration: none;
  transition: box-shadow var(--duration-base) var(--easing-out),
              transform var(--duration-base) var(--easing-out);
}
a.pi-card:hover { box-shadow: var(--card-shadow-hover); transform: translateY(calc(var(--space-1) * -1)); }
a.pi-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }

@media (prefers-reduced-motion: reduce) {
  a.pi-card { transition: none; }
  a.pi-card:hover { transform: none; }
}

Changelog

날짜	변경
2026-07-15	문서 계약(10섹션) 적용 — Anatomy 도해·링크 카드 상태·콘텐츠 규칙·키보드·코드 신설, 기존 규격 승계