Alert
Import
<link rel="stylesheet" href="/guide/css/base/index.css" /> <link rel="stylesheet" href="/guide/css/components/alert.css" />
Variants
Success
✓
Title
Content
Error
✕
Title
Content
Warning
⚠
Title
Content
Info
ℹ
Title
Content
Specs
| 요소 | Width | Height | Border Radius | Left Bar | Font (Title / Text) |
|---|---|---|---|---|---|
| Alert | 280px | min 80px | 8px (--radius-md) | 4px | 16px / 14px · Pretendard Regular |
Code
<div class="alert alert--success" role="alert">
<div class="alert__bar"></div>
<span class="alert__icon">✓</span>
<div class="alert__content">
<p class="alert__title">Title</p>
<p class="alert__text">Content</p>
</div>
<button class="alert__close" aria-label="닫기">×</button>
</div>
<!-- Variants: alert--success / alert--error / alert--warning / alert--info -->
Classes
| 클래스 | 타입 | 설명 |
|---|---|---|
| .alert | 루트 | 알림 컨테이너 |
| .alert--success | 수정자 | 성공 — 초록 |
| .alert--error | 수정자 | 에러 — 빨강 |
| .alert--warning | 수정자 | 경고 — 노랑 |
| .alert--info | 수정자 | 정보 — 파랑 |
| .alert__bar | 요소 | 좌측 색상 바 (4px) |
| .alert__icon | 요소 | 아이콘 텍스트 |
| .alert__content | 요소 | 텍스트 영역 |
| .alert__title | 요소 | 제목 (16px) |
| .alert__text | 요소 | 내용 (14px) |
| .alert__close | 요소 | 닫기 버튼 (우측 상단) |