Skip to content
EN KO VI NE KM ID
Design business cards Character collection 16 designs · PNG / SVG / PDF

Card list

For lists where the photo decides — rooms, used goods, jobs people scan by eye.

Data display

Live preview

Source

<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; }

How to use it

  • One card carries four things: photo, title, value, tag
  • Keep the value (price, day rate) in the same spot so the column scans down
  • Size it so about three cards fit a screen — smaller and the photo stops earning its space

Watch out for

  • Reserve the photo slot even when there is no photo, or the list goes ragged
  • In a two-column grid, clamp the title to two lines with an ellipsis

Next