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

Collapsed card

For showing the summary first and letting only whoever needs the detail open it.

Data display

Live preview

Source

<details class="dc-fold">
  <summary class="dc-fold__sum">
    <span class="dc-fold__main">
      <span class="dc-fold__title">3월 18일 출근 기록</span>
      <span class="dc-fold__sub">A현장 · 8시간 · 일급 140,000원</span>
    </span>
    <span class="dc-fold__mark" aria-hidden="true">⌄</span>
  </summary>
  <div class="dc-fold__body">
    <dl class="dc-fold__dl">
      <div class="dc-fold__line">
        <dt class="dc-fold__dt">출근</dt>
        <dd class="dc-fold__dd">오전 7시 02분</dd>
      </div>
      <div class="dc-fold__line">
        <dt class="dc-fold__dt">퇴근</dt>
        <dd class="dc-fold__dd">오후 4시 10분</dd>
      </div>
      <div class="dc-fold__line">
        <dt class="dc-fold__dt">확인한 사람</dt>
        <dd class="dc-fold__dd">최영호 소장</dd>
      </div>
    </dl>
    <p class="dc-fold__note">기록이 다르면 현장 관리자에게 알려 주세요.</p>
  </div>
</details>
.dc-fold {
  overflow: hidden;
  background: var(--dc-surface);
  border: 1px solid var(--dc-line);
  border-radius: var(--dc-r-md);
  font-family: var(--dc-font);
}
.dc-fold__sum {
  display: flex; align-items: center; gap: var(--dc-3);
  min-height: 60px; padding: var(--dc-3) var(--dc-4);
  list-style: none; cursor: pointer;
  transition: background var(--dc-fast);
}
.dc-fold__sum::-webkit-details-marker { display: none; }
.dc-fold__sum:active { background: var(--dc-sunken); }
.dc-fold__main {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.dc-fold__title { font-size: 15px; font-weight: 700; color: var(--dc-text); }
.dc-fold__sub { font-size: 13px; line-height: 1.5; color: var(--dc-text-sub); }
.dc-fold__mark {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: var(--dc-r-full);
  background: var(--dc-sunken); color: var(--dc-text-sub);
  font-size: 14px; line-height: 1;
  transition: transform var(--dc-slow);
}
.dc-fold[open] .dc-fold__mark { transform: rotate(180deg); }
.dc-fold__body {
  padding: 0 var(--dc-4) var(--dc-4);
  border-top: 1px solid var(--dc-line);
}
.dc-fold__dl {
  display: flex; flex-direction: column; gap: var(--dc-2);
  margin: var(--dc-3) 0 0;
}
.dc-fold__line { display: flex; justify-content: space-between; gap: var(--dc-3); }
.dc-fold__dt { margin: 0; font-size: 13px; color: var(--dc-text-mute); }
.dc-fold__dd { margin: 0; font-size: 13px; font-weight: 700; color: var(--dc-text); text-align: right; }
.dc-fold__note {
  margin: var(--dc-3) 0 0;
  font-size: 12px; line-height: 1.6; color: var(--dc-text-mute);
}
.dc-fold-stack {
  display: flex; flex-direction: column; gap: var(--dc-3);
  padding: var(--dc-4);
  background: var(--dc-bg);
}

How to use it

  • Write the summary line so the closed card still says what's inside
  • Leave the one people open most already expanded
  • Never collapse something everyone must read — collapsed means unread

Watch out for

  • Build it from details/summary: it opens with no script, and screen readers announce the state
  • The whole summary row is the target — don't make people hit the chevron

Next