कार्ड सूची

तस्बिरले निर्णय गर्ने सूचीका लागि — कोठा, पुराना सामान, काम।

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

स्रोत

HTML CSS

<ul class="dc-clist">
  <li class="dc-clist__item">
    <a class="dc-clist__card" href="#">
      <span class="dc-clist__thumb" aria-hidden="true"></span>
      <span class="dc-clist__body">
        <span class="dc-clist__tag">당일지급</span>
        <span class="dc-clist__title">인천 남동공단 상하차 보조</span>
        <span class="dc-clist__meta">남동구 고잔동 · 오전 7시</span>
        <span class="dc-clist__value">일급 140,000원</span>
      </span>
    </a>
  </li>
  <li class="dc-clist__item">
    <a class="dc-clist__card" href="#">
      <span class="dc-clist__thumb" aria-hidden="true"></span>
      <span class="dc-clist__body">
        <span class="dc-clist__tag">주말만</span>
        <span class="dc-clist__title">시흥 정왕동 아파트 내부 정리</span>
        <span class="dc-clist__meta">시흥시 정왕동 · 오전 8시</span>
        <span class="dc-clist__value">일급 120,000원</span>
      </span>
    </a>
  </li>
  <li class="dc-clist__item">
    <a class="dc-clist__card" href="#">
      <span class="dc-clist__thumb" aria-hidden="true"></span>
      <span class="dc-clist__body">
        <span class="dc-clist__tag">초보가능</span>
        <span class="dc-clist__title">안산 원곡동 식품공장 포장</span>
        <span class="dc-clist__meta">안산시 원곡동 · 오후 2시</span>
        <span class="dc-clist__value">시급 11,500원</span>
      </span>
    </a>
  </li>
</ul>

.dc-clist {
  display: flex; flex-direction: column; gap: var(--dc-3);
  margin: 0; padding: var(--dc-4); list-style: none;
  background: var(--dc-bg);
  font-family: var(--dc-font);
}
.dc-clist__item { min-width: 0; }
.dc-clist__card {
  display: flex; gap: var(--dc-3);
  height: 100%; padding: var(--dc-3);
  background: var(--dc-surface);
  border: 1px solid var(--dc-line);
  border-radius: var(--dc-r-md);
  box-shadow: var(--dc-sh-1);
  color: inherit; text-decoration: none;
  transition: border-color var(--dc-fast), transform var(--dc-fast);
}
.dc-clist__card:active { transform: scale(.99); border-color: var(--dc-line-bold); }
.dc-clist__thumb {
  flex: 0 0 92px; align-self: stretch; min-height: 92px;
  border-radius: var(--dc-r-sm);
  background: linear-gradient(135deg, var(--dc-brand-soft), var(--dc-sunken));
}
.dc-clist__body {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: var(--dc-1);
}
.dc-clist__tag {
  align-self: flex-start;
  padding: 2px var(--dc-2); border-radius: var(--dc-r-full);
  background: var(--dc-ok-soft); color: var(--dc-ok);
  font-size: 11px; font-weight: 700;
}
.dc-clist__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px; font-weight: 700; line-height: 1.4;
  color: var(--dc-text);
}
.dc-clist__meta {
  font-size: 12px; color: var(--dc-text-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dc-clist__value {
  margin-top: auto; padding-top: var(--dc-1);
  font-size: 14px; font-weight: 700; color: var(--dc-text);
}
.dc-clist--grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dc-clist--grid .dc-clist__card { flex-direction: column; }
.dc-clist--grid .dc-clist__thumb { flex: none; min-height: 0; aspect-ratio: 4 / 3; }
.dc-clist--compact .dc-clist__thumb { flex: 0 0 64px; min-height: 64px; }
.dc-clist--compact .dc-clist__title { -webkit-line-clamp: 1; }

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

एक कार्डमा चार चीज मात्र: तस्बिर, शीर्षक, मान, ट्याग
मान (मूल्य, ज्याला) सधैं एकै ठाउँमा राख्नुहोस् ताकि तल-तल हेर्दा सजिलो होस्
एक पर्दामा तीनवटा कार्ड अट्ने उचाइ राख्नुहोस्

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

तस्बिर नभएको कार्डमा पनि त्यही ठाउँ छोड्नुहोस्, नत्र सूची बिग्रिन्छ
दुई स्तम्भको ग्रिडमा शीर्षक दुई लाइनमा काटी अन्त्यमा तीन थोप्ला राख्नुहोस्

अर्को

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

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

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

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