Components
Callout
문맥 안에서 주의·안내를 전하는 박스입니다. 좌측 3px 컬러 보더가 성격을 나타냅니다.
안내 — 파일은 30일간 보관 후 자동 파기됩니다.
전송 실패 — 전송 링크가 만료되었습니다. 담당자에게 재발급을 요청해 주세요.
코드 보기
<div class="tn-callout err"><b>전송 실패</b> — 원인 + 다음 행동 한 문장</div>Variants
| 이름 | 설명 | 미리보기 |
|---|---|---|
| info | 파랑 보더 — 중립 안내 | 안내 |
| ok | 그린 보더 — 성공 문맥 | 완료 |
| err | 레드 보더 — 오류 | 실패 |
Guidelines
✓ Do
- 원인 + 다음 행동을 한 문장에 담는다
- 굵은 머리말 + 본문 구조 유지
✕ Don't
- 네이티브 alert 대신임을 잊지 않는다 — alert 금지
- 한 화면에 2개 이상 쌓지 않는다
Specification
| 속성 | 토큰/값 | 비고 |
|---|---|---|
보더 | 1px + 좌측 3px 컬러 | |
radius | 8px | |
타이포 | 0.8rem / 행간 1.6 |
비교
Callout vs Snackbar — Callout은 문맥 안 고정 안내, Snackbar는 행동 직후 잠깐 뜨는 피드백.