सूचना पङ्क्ति

भएका सूचना फेरि हेर्दै के नपढेको छ छुट्याउँदा।

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

स्रोत

HTML CSS

<ul class="dc-noti">
  <li class="dc-noti__item dc-noti__item--unread">
    <a class="dc-noti__row" href="#">
      <span class="dc-noti__ico dc-noti__ico--ok" aria-hidden="true">✓</span>
      <span class="dc-noti__body">
        <span class="dc-noti__title">3월 급여 2,480,000원이 들어왔습니다</span>
        <span class="dc-noti__text">명세서에서 공제 내역을 확인할 수 있습니다</span>
        <span class="dc-noti__time">12분 전</span>
      </span>
      <span class="dc-sr">안 읽음</span>
      <span class="dc-noti__dot" aria-hidden="true"></span>
    </a>
  </li>
  <li class="dc-noti__item dc-noti__item--unread">
    <a class="dc-noti__row" href="#">
      <span class="dc-noti__ico dc-noti__ico--warn" aria-hidden="true">!</span>
      <span class="dc-noti__body">
        <span class="dc-noti__title">안전교육 이수 기한이 3일 남았습니다</span>
        <span class="dc-noti__text">3월 20일까지 듣지 않으면 현장 출입이 막힙니다</span>
        <span class="dc-noti__time">2시간 전</span>
      </span>
      <span class="dc-sr">안 읽음</span>
      <span class="dc-noti__dot" aria-hidden="true"></span>
    </a>
  </li>
  <li class="dc-noti__item dc-noti__item--read">
    <a class="dc-noti__row" href="#">
      <span class="dc-noti__ico" aria-hidden="true">◇</span>
      <span class="dc-noti__body">
        <span class="dc-noti__title">최영호 소장님이 메시지를 보냈습니다</span>
        <span class="dc-noti__text">내일 아침 8시에 자재 들어옵니다</span>
        <span class="dc-noti__time">어제</span>
      </span>
    </a>
  </li>
</ul>

.dc-noti {
  margin: 0; padding: 0; list-style: none;
  background: var(--dc-surface);
  font-family: var(--dc-font);
}
.dc-noti__item + .dc-noti__item { border-top: 1px solid var(--dc-line); }
.dc-noti__item--unread { background: var(--dc-brand-soft); }
.dc-noti__row {
  display: flex; align-items: flex-start; gap: var(--dc-3);
  min-height: 72px; padding: var(--dc-4);
  color: inherit; text-decoration: none;
  transition: background var(--dc-fast);
}
.dc-noti__ico {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: var(--dc-r-full);
  background: var(--dc-sunken); color: var(--dc-text-sub);
  font-size: 16px; font-weight: 700;
}
.dc-noti__ico--ok { background: var(--dc-ok-soft); color: var(--dc-ok); }
.dc-noti__ico--warn { background: var(--dc-warn-soft); color: var(--dc-warn); }
.dc-noti__ico--info { background: var(--dc-info-soft); color: var(--dc-info); }
.dc-noti__body {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: var(--dc-1);
}
.dc-noti__title { font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--dc-text); }
.dc-noti__text { font-size: 13px; line-height: 1.5; color: var(--dc-text-sub); }
.dc-noti__time { font-size: 11px; color: var(--dc-text-mute); }
.dc-noti__dot {
  flex: 0 0 auto; width: 8px; height: 8px; margin-top: var(--dc-2);
  border-radius: var(--dc-r-full); background: var(--dc-danger);
}
.dc-noti__acts { display: flex; gap: var(--dc-2); margin-top: var(--dc-2); }
.dc-noti__btn {
  min-height: 44px; padding: 0 var(--dc-4);
  border: 1px solid var(--dc-line-field); border-radius: var(--dc-r-sm);
  background: var(--dc-surface); color: var(--dc-text);
  font-family: inherit; font-size: 14px; font-weight: 700;
}
.dc-noti__btn--main {
  border-color: var(--dc-brand);
  background: var(--dc-brand); color: var(--dc-text-on);
}
.dc-noti__item--read .dc-noti__title { font-weight: 400; color: var(--dc-text-sub); }

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

पहिलो लाइन मात्र पढ्दा पनि के भयो थाहा हुने गरी लेख्नुहोस् — 'सूचना छ' भन्नु सूचना होइन
नपढेको दुई तरिकाले देखाउनुहोस्: थोप्लो र पृष्ठभूमि
समय '१२ मिनेट अघि' जस्तो सापेक्ष, एक दिन नाघे मिति लेख्नुहोस्

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

रङको थोप्लो मात्र संकेत हुन सक्दैन — स्क्रिन रिडरलाई लुकाएको अक्षर राख्नुहोस्
पङ्क्ति भित्र बटन भए पूरै पङ्क्ति लिंकमा नबेर्नुहोस्

अर्को

सूची पङ्क्ति जानकारी प्रदर्शन एप

सेटिङ सूची जानकारी प्रदर्शन एप

कार्ड सूची जानकारी प्रदर्शन एप

च्याट बबल जानकारी प्रदर्शन एप