Components

Card

콘텐츠를 묶는 기본 표면입니다.

Example
보안 파일 전송
암호화 연결로 직접 전달됩니다.
코드 보기
<div class="tn-card">…</div>

Variants

이름설명미리보기
Default흰 배경 · 1px 테두리 · 미세 그림자
Default

Guidelines

✓ Do
  • 페이지 배경(--canvas) 위에만 놓는다
  • 카드 안 카드 중첩은 1단까지
✕ Don't
  • 그림자를 키우지 않는다 (0 1px 3px 5% 고정)
  • 테두리 없는 카드를 만들지 않는다

Specification

속성토큰/값비고
배경var(--card)
테두리1px var(--border)
radiusvar(--radius) = 0.5rem
그림자0 1px 3px rgba(0,0,0,.05)