सूचना ब्यानर

अगाडि बढ्नु अघि पढ्नै पर्ने कुरा पर्दामा देखाउनुपर्दा प्रयोग गर्ने टुक्रा।

प्रत्यक्ष पूर्वावलोकन

स्रोत

HTML CSS

<div class="dc-alert dc-alert--info" role="status">
  <svg class="dc-alert__icon" viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M10 1.6a8.4 8.4 0 1 0 0 16.8 8.4 8.4 0 0 0 0-16.8Zm1 13.2H9V9h2v5.8Zm-1-7.6a1.15 1.15 0 1 1 0-2.3 1.15 1.15 0 0 1 0 2.3Z"/></svg>
  <div class="dc-alert__body">
    <p class="dc-alert__title">제출 기한이 3일 남았습니다</p>
    <p class="dc-alert__text">9월 15일 밤 12시까지 올리지 않은 서류는 이번 분기 심사에서 빠집니다.</p>
  </div>
  <button class="dc-alert__close" type="button"><svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M4.2 4.2l7.6 7.6M11.8 4.2l-7.6 7.6" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg><span class="dc-sr">알림 닫기</span></button>
</div>

.dc-alert {
  display: flex; align-items: flex-start; gap: var(--dc-3);
  padding: var(--dc-4);
  border: 1px solid var(--dc-line);
  border-radius: var(--dc-r-md);
  background: var(--dc-surface);
  font-family: var(--dc-font);
}
.dc-alert__icon { flex: none; width: 20px; height: 20px; margin-top: 1px; fill: currentColor; }
.dc-alert__body { flex: 1 1 auto; min-width: 0; }
.dc-alert__title { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.45; color: var(--dc-text); }
.dc-alert__text { margin: var(--dc-1) 0 0; font-size: 13px; line-height: 1.65; color: var(--dc-text-sub); }
.dc-alert__close {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin: -4px -6px 0 0;
  padding: 0; border: 0; border-radius: var(--dc-r-sm);
  background: transparent; color: var(--dc-text-mute);
  transition: background var(--dc-fast), color var(--dc-fast);
}
.dc-alert__close svg { width: 16px; height: 16px; }
.dc-alert__close:hover { background: color-mix(in srgb, var(--dc-text) 8%, transparent); color: var(--dc-text); }
.dc-alert--info { background: var(--dc-info-soft); border-color: color-mix(in srgb, var(--dc-info) 38%, transparent); }
.dc-alert--info .dc-alert__icon { color: var(--dc-info); }
.dc-alert--ok { background: var(--dc-ok-soft); border-color: color-mix(in srgb, var(--dc-ok) 38%, transparent); }
.dc-alert--ok .dc-alert__icon { color: var(--dc-ok); }
.dc-alert--warn { background: var(--dc-warn-soft); border-color: color-mix(in srgb, var(--dc-warn) 38%, transparent); }
.dc-alert--warn .dc-alert__icon { color: var(--dc-warn); }
.dc-alert--danger { background: var(--dc-danger-soft); border-color: color-mix(in srgb, var(--dc-danger) 38%, transparent); }
.dc-alert--danger .dc-alert__icon { color: var(--dc-danger); }
@media (max-width: 420px) {
  .dc-alert { padding: var(--dc-3); }
}

कसरी प्रयोग गर्ने

अर्थ रङमा मात्र न छोड्नुहोस् — आइकन र अक्षरले पनि त्यही भन्नुपर्छ
ब्यानर सम्बन्धित भागको ठीक माथि राख्नुहोस्
त्रुटि ब्यानरमा अब के गर्ने पनि लेख्नुहोस्

ध्यान दिनुपर्ने कुरा

role=alert स्क्रिन रिडरलाई बीचमा रोक्छ — साँच्चिकै त्रुटिमा मात्र, अरूमा role=status
एपमा सार्दा बन्द गर्ने बटनको छुने क्षेत्र 44px बनाउनुहोस्

अर्को

गोलो प्रगति प्रतिक्रिया एप वेब

पङ्क्तिभित्रको सूचना प्रतिक्रिया एप वेब

इनलाइन त्रुटि प्रतिक्रिया वेब

प्रगति पट्टी प्रतिक्रिया एप वेब