सूची पङ्क्ति

'को' वा 'के' पहिले देखिनुपर्ने पङ्क्तिहरू थुप्रो पार्नुपर्दा — मान्छे, साइट, काम।

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

स्रोत

HTML CSS

<ul class="dc-lrow">
  <li class="dc-lrow__item">
    <a class="dc-lrow__link" href="#">
      <span class="dc-lrow__avatar" aria-hidden="true">김</span>
      <span class="dc-lrow__body">
        <span class="dc-lrow__title">김현수 반장</span>
        <span class="dc-lrow__sub">A현장 · 철근공 · 오늘 출근</span>
      </span>
      <span class="dc-lrow__arrow" aria-hidden="true">›</span>
    </a>
  </li>
  <li class="dc-lrow__item">
    <a class="dc-lrow__link" href="#">
      <span class="dc-lrow__avatar" aria-hidden="true">응</span>
      <span class="dc-lrow__body">
        <span class="dc-lrow__title">응우옌 반 안</span>
        <span class="dc-lrow__sub">A현장 · 형틀목공 · 오늘 출근</span>
      </span>
      <span class="dc-lrow__arrow" aria-hidden="true">›</span>
    </a>
  </li>
  <li class="dc-lrow__item">
    <a class="dc-lrow__link" href="#">
      <span class="dc-lrow__avatar" aria-hidden="true">박</span>
      <span class="dc-lrow__body">
        <span class="dc-lrow__title">박민정 팀장</span>
        <span class="dc-lrow__sub">B현장 · 안전관리 · 휴무</span>
      </span>
      <span class="dc-lrow__arrow" aria-hidden="true">›</span>
    </a>
  </li>
</ul>

.dc-lrow {
  margin: 0; padding: 0; list-style: none;
  background: var(--dc-surface);
  font-family: var(--dc-font);
}
.dc-lrow__item { position: relative; }
.dc-lrow__item + .dc-lrow__item { border-top: 1px solid var(--dc-line); }
.dc-lrow__item--unread { background: var(--dc-brand-soft); }
.dc-lrow__link {
  display: flex; align-items: center; gap: var(--dc-3);
  min-height: 64px; padding: var(--dc-3) var(--dc-4);
  color: inherit; text-decoration: none;
  transition: background var(--dc-fast);
}
.dc-lrow__link:active { background: var(--dc-sunken); }
.dc-lrow__avatar {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--dc-r-full);
  background: var(--dc-brand-soft); color: var(--dc-brand-text);
  font-size: 16px; font-weight: 700;
}
.dc-lrow__thumb {
  flex: 0 0 auto; width: 56px; height: 56px;
  border: 1px solid var(--dc-line); border-radius: var(--dc-r-sm);
  background: linear-gradient(135deg, var(--dc-brand-soft), var(--dc-sunken));
}
.dc-lrow__body {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.dc-lrow__title {
  font-size: 15px; font-weight: 700; color: var(--dc-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dc-lrow__sub {
  font-size: 13px; line-height: 1.5; color: var(--dc-text-sub);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dc-lrow__value {
  flex: 0 0 auto; font-size: 13px; font-weight: 700;
  color: var(--dc-text-sub); white-space: nowrap;
}
.dc-lrow__badge {
  flex: 0 0 auto; width: 8px; height: 8px;
  border-radius: var(--dc-r-full); background: var(--dc-danger);
}
.dc-lrow__arrow {
  flex: 0 0 auto; font-size: 20px; line-height: 1;
  color: var(--dc-text-mute);
}

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

शीर्षक एक लाइन, उपशीर्षक एक लाइन मात्र — तेस्रो लाइन चाहिए भए कार्ड प्रयोग गर्नुहोस्
अर्को पर्दा खुल्ने पङ्क्तिमा मात्र तीर राख्नुहोस्
तस्बिर भए तस्बिर, नभए नामको पहिलो अक्षर गोलो घेरामा

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

थिच्ने पङ्क्ति 56px भन्दा होचो नबनाउनुहोस् — गाडीमा हिँड्दै थिचिन्छ
पूरै पङ्क्ति एउटै लिंकमा बेर्नुहोस्, भित्र अर्को बटन नराख्नुहोस्

अर्को

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

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

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

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