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

Side panel

Slides in beside the list so people can inspect one row or set filters without losing their place.

Overlays

Live preview

Source

<div class="dc-sp-stage">
  <div class="dc-sp-stage__page" aria-hidden="true">
    <div class="dc-sp-stage__bar dc-sp-stage__bar--w45"></div>
    <div class="dc-sp-stage__bar"></div>
    <div class="dc-sp-stage__bar dc-sp-stage__bar--w70"></div>
    <div class="dc-sp-stage__bar"></div>
    <div class="dc-sp-stage__bar dc-sp-stage__bar--w70"></div>
  </div>
  <div class="dc-sp" role="dialog" aria-modal="true" aria-labelledby="dc-sp-t">
    <div class="dc-sp__head">
      <h2 class="dc-sp__title" id="dc-sp-t">주문 걸러 보기</h2>
      <button class="dc-sp__x" type="button"><svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M4 4l8 8M12 4l-8 8" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg><span class="dc-sr">패널 닫기</span></button>
    </div>
    <div class="dc-sp__body">
      <fieldset class="dc-sp__group">
        <legend class="dc-sp__legend">진행 상태</legend>
        <label class="dc-sp__check" for="dc-sp-st-new"><input type="checkbox" id="dc-sp-st-new" checked> 접수</label>
        <label class="dc-sp__check" for="dc-sp-st-pack"><input type="checkbox" id="dc-sp-st-pack" checked> 포장 중</label>
        <label class="dc-sp__check" for="dc-sp-st-ship"><input type="checkbox" id="dc-sp-st-ship"> 배송 중</label>
        <label class="dc-sp__check" for="dc-sp-st-done"><input type="checkbox" id="dc-sp-st-done"> 배송 완료</label>
      </fieldset>
      <fieldset class="dc-sp__group">
        <legend class="dc-sp__legend">결제 방법</legend>
        <label class="dc-sp__check" for="dc-sp-pay-card"><input type="checkbox" id="dc-sp-pay-card" checked> 카드</label>
        <label class="dc-sp__check" for="dc-sp-pay-bank"><input type="checkbox" id="dc-sp-pay-bank"> 계좌 이체</label>
        <label class="dc-sp__check" for="dc-sp-pay-cash"><input type="checkbox" id="dc-sp-pay-cash"> 현장 결제</label>
      </fieldset>
    </div>
    <div class="dc-sp__foot">
      <button class="dc-sp__btn" type="button">모두 지우기</button>
      <button class="dc-sp__btn dc-sp__btn--primary" type="button">주문 128건 보기</button>
    </div>
  </div>
</div>
.dc-sp-stage {
  position: relative; display: flex; justify-content: flex-end;
  min-height: 420px; overflow: hidden;
  border: 1px solid var(--dc-line); border-radius: var(--dc-r-md);
  background: var(--dc-bg); font-family: var(--dc-font);
}
.dc-sp-stage--left { justify-content: flex-start; }
.dc-sp-stage__page { position: absolute; inset: 0; padding: var(--dc-5); }
.dc-sp-stage__page::after { content: ""; position: absolute; inset: 0; background: var(--dc-overlay); }
.dc-sp-stage__bar { height: 12px; margin-bottom: var(--dc-4); border-radius: var(--dc-r-xs); background: var(--dc-sunken); }
.dc-sp-stage__bar--w70 { width: 70%; }
.dc-sp-stage__bar--w45 { width: 45%; }
.dc-sp {
  position: relative; display: flex; flex-direction: column;
  width: 360px; max-width: 100%;
  background: var(--dc-surface);
  border-left: 1px solid var(--dc-line);
  box-shadow: var(--dc-sh-3);
}
.dc-sp--left { border-left: 0; border-right: 1px solid var(--dc-line); }
.dc-sp__head {
  display: flex; align-items: center; gap: var(--dc-3);
  padding: var(--dc-4) var(--dc-5);
  border-bottom: 1px solid var(--dc-line);
}
.dc-sp__title { flex: 1 1 auto; margin: 0; font-size: 16px; font-weight: 700; color: var(--dc-text); }
.dc-sp__x {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px;
  margin-right: -6px; padding: 0; border: 0; border-radius: var(--dc-r-sm);
  background: transparent; color: var(--dc-text-mute);
  transition: background var(--dc-fast), color var(--dc-fast);
}
.dc-sp__x svg { width: 16px; height: 16px; }
.dc-sp__x:hover { background: var(--dc-sunken); color: var(--dc-text); }
.dc-sp__body { flex: 1 1 auto; overflow-y: auto; padding: var(--dc-5); }
.dc-sp__group { margin: 0 0 var(--dc-5); padding: 0; border: 0; }
.dc-sp__legend { padding: 0; margin-bottom: var(--dc-1); font-size: 12px; font-weight: 700; color: var(--dc-text-mute); }
.dc-sp__check {
  display: flex; align-items: center; gap: var(--dc-3);
  min-height: 40px; font-size: 14px; color: var(--dc-text); cursor: pointer;
}
.dc-sp__check input { width: 18px; height: 18px; accent-color: var(--dc-brand); }
.dc-sp__foot {
  display: flex; gap: var(--dc-2); padding: var(--dc-4) var(--dc-5);
  border-top: 1px solid var(--dc-line); background: var(--dc-surface);
}
.dc-sp__btn {
  flex: 1 1 auto; min-height: 44px; padding: 0 var(--dc-3);
  border: 1px solid var(--dc-line-field); border-radius: var(--dc-r-sm);
  background: var(--dc-surface); color: var(--dc-text);
  font-size: 14px; font-weight: 600;
  transition: background var(--dc-fast), border-color var(--dc-fast);
}
.dc-sp__btn:hover { background: var(--dc-sunken); }
.dc-sp__btn--primary { flex: 2 1 auto; border-color: var(--dc-brand); background: var(--dc-brand); color: var(--dc-text-on); }
.dc-sp__btn--primary:hover { background: var(--dc-brand-hi); border-color: var(--dc-brand-hi); }
.dc-sp__dl { margin: 0; }
.dc-sp__dt { margin-top: var(--dc-4); font-size: 12px; font-weight: 700; color: var(--dc-text-mute); }
.dc-sp__dd { margin: var(--dc-1) 0 0; font-size: 14px; line-height: 1.6; color: var(--dc-text); }
@media (max-width: 560px) {
  .dc-sp { width: 100%; }
}

How to use it

  • Use it when the list behind must stay visible — filtering, or looking at one record
  • Pin the apply button to the bottom so it survives scrolling
  • Let the content decide the width — narrow for filters, wider for detail
  • When a row is open in the panel, mark that row in the list behind

Watch out for

  • On a narrow screen, switch to a full screen or a bottom sheet — a 360px panel does not fit in 420px
  • If you set aria-modal, you must trap Tab inside; if you won't trap it, drop aria-modal

Next