17 CSS Dashboard Layouts09 / 17

Pure CSSMIT licensed

E-Commerce Merchant Control Panel

Shopify-grade density in pure CSS: a stat strip up top, a filterable orders table in the middle, a quick-action rail on the right — and the flagship trick: tick any order checkbox and a bulk-actions bar slides up from the table footer, powered entirely by :has(tbody input:checked). Row highlighting, native accent-color checkboxes, color-mixed status pills, zebra striping: every convention of a real merchant panel, zero JavaScript.

Published

Live Demo
Try it

The code

<section class="cdl-09" aria-label="E-commerce merchant panel demo">
  <div class="cdl-09__panel">
    <div class="cdl-09__stats">
      <article><h3>Today's sales</h3><p>$4,982</p><small class="cdl-09__up">▲ 9.4%</small></article>
      <article><h3>Open orders</h3><p>37</p><small>12 awaiting shipment</small></article>
      <article><h3>Conversion</h3><p>3.1%</p><small class="cdl-09__up">▲ 0.3 pts</small></article>
      <article><h3>Low stock</h3><p>5 SKUs</p><small class="cdl-09__warn">restock soon</small></article>
    </div>
    <div class="cdl-09__card">
      <header class="cdl-09__thead">
        <h2>Orders</h2>
        <div class="cdl-09__filters" role="group" aria-label="Filter orders"><button type="button" aria-pressed="true" class="cdl-09__fon">All</button><button type="button" aria-pressed="false">Unfulfilled</button><button type="button" aria-pressed="false">Unpaid</button><button type="button" aria-pressed="false">Archived</button></div>
      </header>
      <div class="cdl-09__tablewrap" tabindex="0">
        <table>
          <caption class="cdl-09__sr">Recent orders — select rows to reveal bulk actions</caption>
          <thead><tr><th scope="col" class="cdl-09__chk"><span class="cdl-09__sr">Select</span></th><th scope="col">Order</th><th scope="col">Customer</th><th scope="col">Status</th><th scope="col" class="cdl-09__num">Total</th></tr></thead>
          <tbody>
            <tr><td class="cdl-09__chk"><input type="checkbox" aria-label="Select order 1207"></td><td>#1207</td><td>Ava Thompson</td><td><span class="cdl-09__pill cdl-09__paid">Paid</span></td><td class="cdl-09__num">$129.00</td></tr>
            <tr><td class="cdl-09__chk"><input type="checkbox" aria-label="Select order 1206"></td><td>#1206</td><td>Noah Clarke</td><td><span class="cdl-09__pill cdl-09__pend">Pending</span></td><td class="cdl-09__num">$54.50</td></tr>
            <tr><td class="cdl-09__chk"><input type="checkbox" aria-label="Select order 1205"></td><td>#1205</td><td>Isla Morgan</td><td><span class="cdl-09__pill cdl-09__paid">Paid</span></td><td class="cdl-09__num">$310.99</td></tr>
            <tr><td class="cdl-09__chk"><input type="checkbox" aria-label="Select order 1204"></td><td>#1204</td><td>Leo Bennett</td><td><span class="cdl-09__pill cdl-09__ship">Shipped</span></td><td class="cdl-09__num">$89.00</td></tr>
            <tr><td class="cdl-09__chk"><input type="checkbox" aria-label="Select order 1203"></td><td>#1203</td><td>Mia Foster</td><td><span class="cdl-09__pill cdl-09__ref">Refunded</span></td><td class="cdl-09__num">−$47.20</td></tr>
            <tr><td class="cdl-09__chk"><input type="checkbox" aria-label="Select order 1202"></td><td>#1202</td><td>Ethan Hayes</td><td><span class="cdl-09__pill cdl-09__paid">Paid</span></td><td class="cdl-09__num">$214.30</td></tr>
          </tbody>
        </table>
      </div>
      <div class="cdl-09__bulk" role="toolbar" aria-label="Bulk actions"><b>Selected orders</b><button type="button">Fulfill</button><button type="button">Print labels</button><button type="button" class="cdl-09__danger">Archive</button></div>
    </div>
    <aside class="cdl-09__rail" aria-label="Quick actions">
      <h2>Quick actions</h2>
      <button type="button" class="cdl-09__qa"><b>＋ Add product</b><span>Catalog</span></button>
      <button type="button" class="cdl-09__qa"><b>⤓ Export orders</b><span>CSV · last 30d</span></button>
      <button type="button" class="cdl-09__qa"><b>% Create discount</b><span>Storewide or SKU</span></button>
      <h2 class="cdl-09__alerth">Inventory alerts</h2>
      <p class="cdl-09__alert"><b>Canvas Tote — Sand</b><span>3 left</span></p>
      <p class="cdl-09__alert"><b>Trail Bottle 750ml</b><span>7 left</span></p>
      <p class="cdl-09__alert"><b>Wool Runner 42</b><span>2 left</span></p>
    </aside>
  </div>
</section>
.cdl-09,
.cdl-09 *,
.cdl-09 *::before,
.cdl-09 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.cdl-09 {
  background: var(--bg);
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  --bg: oklch(0.977 0.006 85);
  --panel: oklch(1 0 0);
  --edge: oklch(0.9 0.015 85);
  --ink: oklch(0.27 0.02 60);
  --mut: oklch(0.54 0.03 60);
  --acc: oklch(0.6 0.14 65);
  --good: oklch(0.55 0.14 155);
  --warn: oklch(0.62 0.14 70);
  --bad: oklch(0.58 0.19 25);
  --ship: oklch(0.55 0.14 245);
  font-family: 'Segoe UI',system-ui,sans-serif;
  color: var(--ink);
  container-type: inline-size;
}

.cdl-09__panel {
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-columns: minmax(0,1fr) 250px;
  grid-template-rows: auto minmax(0,1fr);
  gap: 14px;
  border: 1px solid var(--edge);
  background: linear-gradient(175deg,var(--bg),oklch(0.96 0.008 85));
  padding: 16px;
  min-height: 540px;
}

.cdl-09__stats {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(160px,100%),1fr));
  gap: 12px;
}

.cdl-09__stats article {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 13px;
  padding: 13px 15px;
}

.cdl-09__stats h3 {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mut);
}

.cdl-09__stats p {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  margin: 4px 0 1px;
}

.cdl-09__stats small {
  font-size: 11px;
  color: var(--mut);
  font-weight: 600;
}

.cdl-09__up {
  color: var(--good) !important;
}

.cdl-09__warn {
  color: var(--warn) !important;
}

.cdl-09__card {
  position: relative;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cdl-09__thead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--edge);
  flex-wrap: wrap;
}

.cdl-09__thead h2 {
  font-size: 15px;
}

.cdl-09__filters {
  display: flex;
  gap: 4px;
  background: var(--bg);
  border: 1px solid var(--edge);
  border-radius: 10px;
  padding: 3px;
}

.cdl-09__filters button {
  border: none;
  background: transparent;
  font: 600 12px 'Segoe UI',system-ui,sans-serif;
  color: var(--mut);
  padding: 6px 11px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s,color .15s;
}

.cdl-09__filters button:hover {
  color: var(--ink);
}

.cdl-09__filters button:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: -2px;
}

.cdl-09__fon {
  background: var(--panel) !important;
  color: var(--ink) !important;
  box-shadow: 0 1px 3px oklch(0.4 0.04 60 / .2);
}

.cdl-09__tablewrap {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.cdl-09__tablewrap:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: -2px;
}

.cdl-09__card table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.cdl-09__card th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--mut);
  background: var(--panel);
  padding: 10px 14px;
  border-bottom: 1px solid var(--edge);
}

.cdl-09__card td {
  padding: 11px 14px;
  border-bottom: 1px solid color-mix(in oklch,var(--edge) 50%,transparent);
}

.cdl-09__card tbody tr:nth-child(even) {
  background: color-mix(in oklch,var(--bg) 55%,white);
}

.cdl-09__card tbody tr {
  transition: background .15s;
}

.cdl-09__card tbody tr:hover {
  background: color-mix(in oklch,var(--acc) 5%,white);
}

.cdl-09__card tbody tr:has(input:checked) {
  background: color-mix(in oklch,var(--acc) 8%,white);
}

.cdl-09__card tbody tr:has(input:checked) td:first-child {
  box-shadow: inset 3px 0 0 var(--acc);
}

.cdl-09__chk {
  width: 44px;
  text-align: center;
}

.cdl-09__card input[type=checkbox] {
  width: 16px;
  height: 16px;
  accent-color: var(--acc);
  cursor: pointer;
}

.cdl-09__card input[type=checkbox]:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

.cdl-09__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.cdl-09__pill {
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.cdl-09__paid {
  color: var(--good);
  background: color-mix(in oklch,var(--good) 12%,white);
}

.cdl-09__pend {
  color: oklch(0.52 0.12 70);
  background: color-mix(in oklch,var(--warn) 16%,white);
}

.cdl-09__ship {
  color: var(--ship);
  background: color-mix(in oklch,var(--ship) 11%,white);
}

.cdl-09__ref {
  color: var(--bad);
  background: color-mix(in oklch,var(--bad) 10%,white);
}

.cdl-09__bulk {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  background: oklch(0.25 0.03 60);
  color: oklch(0.97 0 0);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 16px 34px -14px oklch(0.2 0.05 60 / .6);
  translate: 0 130%;
  opacity: 0;
  transition: translate .28s cubic-bezier(.2,.7,.2,1),opacity .2s;
}

.cdl-09__card:has(tbody input:checked) .cdl-09__bulk {
  translate: 0 0;
  opacity: 1;
}

.cdl-09__bulk b {
  font-size: 12.5px;
  margin-right: auto;
}

.cdl-09__bulk button {
  border: 1px solid oklch(0.45 0.03 60);
  background: oklch(0.32 0.03 60);
  color: oklch(0.97 0 0);
  font: 600 12px 'Segoe UI',system-ui,sans-serif;
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
  transition: background .15s;
}

.cdl-09__bulk button:hover {
  background: oklch(0.38 0.04 60);
}

.cdl-09__bulk button:focus-visible {
  outline: 2px solid oklch(0.8 0.12 65);
  outline-offset: 2px;
}

.cdl-09__danger {
  border-color: color-mix(in oklch,var(--bad) 55%,transparent) !important;
  background: color-mix(in oklch,var(--bad) 30%,oklch(0.32 0.03 60)) !important;
}

.cdl-09__rail {
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 14px;
  padding: 16px;
  min-height: 0;
  overflow-y: auto;
}

.cdl-09__rail h2 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mut);
}

.cdl-09__alerth {
  margin-top: 10px;
}

.cdl-09__qa {
  display: grid;
  gap: 2px;
  text-align: left;
  border: 1px solid var(--edge);
  background: var(--bg);
  border-radius: 11px;
  padding: 11px 13px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s,translate .15s,background .15s;
}

.cdl-09__qa:hover {
  border-color: color-mix(in oklch,var(--acc) 50%,var(--edge));
  background: color-mix(in oklch,var(--acc) 5%,white);
  translate: 0 -1px;
}

.cdl-09__qa:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

.cdl-09__qa b {
  font-size: 12.5px;
  color: var(--ink);
}

.cdl-09__qa span {
  font-size: 11px;
  color: var(--mut);
}

.cdl-09__alert {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  padding: 9px 11px;
  border: 1px solid color-mix(in oklch,var(--warn) 30%,var(--edge));
  background: color-mix(in oklch,var(--warn) 7%,white);
  border-radius: 10px;
}

.cdl-09__alert b {
  font-weight: 600;
}

.cdl-09__alert span {
  color: oklch(0.5 0.12 70);
  font-weight: 700;
  white-space: nowrap;
}

@container (max-width: 720px) {
  .cdl-09__panel {
    grid-template-columns: minmax(0,1fr);
  }

  .cdl-09__rail {
    grid-row: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cdl-09 * {
    transition: none !important;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Dashboard Layout from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: E-Commerce Merchant Control Panel
Source: https://codefronts.com/layouts/css-dashboard-layouts/e-commerce-merchant-control-panel/

Shopify-grade density in pure CSS: a stat strip up top, a filterable orders table in the middle, a quick-action rail on the right — and the flagship trick: tick any order checkbox and a bulk-actions bar slides up from the table footer, powered entirely by :has(tbody input:checked). Row highlighting, native accent-color checkboxes, color-mixed status pills, zebra striping: every convention of a real merchant panel, zero JavaScript.
## HTML
```html
<section class="cdl-09" aria-label="E-commerce merchant panel demo">
  <div class="cdl-09__panel">
    <div class="cdl-09__stats">
      <article><h3>Today's sales</h3><p>$4,982</p><small class="cdl-09__up">▲ 9.4%</small></article>
      <article><h3>Open orders</h3><p>37</p><small>12 awaiting shipment</small></article>
      <article><h3>Conversion</h3><p>3.1%</p><small class="cdl-09__up">▲ 0.3 pts</small></article>
      <article><h3>Low stock</h3><p>5 SKUs</p><small class="cdl-09__warn">restock soon</small></article>
    </div>
    <div class="cdl-09__card">
      <header class="cdl-09__thead">
        <h2>Orders</h2>
        <div class="cdl-09__filters" role="group" aria-label="Filter orders"><button type="button" aria-pressed="true" class="cdl-09__fon">All</button><button type="button" aria-pressed="false">Unfulfilled</button><button type="button" aria-pressed="false">Unpaid</button><button type="button" aria-pressed="false">Archived</button></div>
      </header>
      <div class="cdl-09__tablewrap" tabindex="0">
        <table>
          <caption class="cdl-09__sr">Recent orders — select rows to reveal bulk actions</caption>
          <thead><tr><th scope="col" class="cdl-09__chk"><span class="cdl-09__sr">Select</span></th><th scope="col">Order</th><th scope="col">Customer</th><th scope="col">Status</th><th scope="col" class="cdl-09__num">Total</th></tr></thead>
          <tbody>
            <tr><td class="cdl-09__chk"><input type="checkbox" aria-label="Select order 1207"></td><td>#1207</td><td>Ava Thompson</td><td><span class="cdl-09__pill cdl-09__paid">Paid</span></td><td class="cdl-09__num">$129.00</td></tr>
            <tr><td class="cdl-09__chk"><input type="checkbox" aria-label="Select order 1206"></td><td>#1206</td><td>Noah Clarke</td><td><span class="cdl-09__pill cdl-09__pend">Pending</span></td><td class="cdl-09__num">$54.50</td></tr>
            <tr><td class="cdl-09__chk"><input type="checkbox" aria-label="Select order 1205"></td><td>#1205</td><td>Isla Morgan</td><td><span class="cdl-09__pill cdl-09__paid">Paid</span></td><td class="cdl-09__num">$310.99</td></tr>
            <tr><td class="cdl-09__chk"><input type="checkbox" aria-label="Select order 1204"></td><td>#1204</td><td>Leo Bennett</td><td><span class="cdl-09__pill cdl-09__ship">Shipped</span></td><td class="cdl-09__num">$89.00</td></tr>
            <tr><td class="cdl-09__chk"><input type="checkbox" aria-label="Select order 1203"></td><td>#1203</td><td>Mia Foster</td><td><span class="cdl-09__pill cdl-09__ref">Refunded</span></td><td class="cdl-09__num">−$47.20</td></tr>
            <tr><td class="cdl-09__chk"><input type="checkbox" aria-label="Select order 1202"></td><td>#1202</td><td>Ethan Hayes</td><td><span class="cdl-09__pill cdl-09__paid">Paid</span></td><td class="cdl-09__num">$214.30</td></tr>
          </tbody>
        </table>
      </div>
      <div class="cdl-09__bulk" role="toolbar" aria-label="Bulk actions"><b>Selected orders</b><button type="button">Fulfill</button><button type="button">Print labels</button><button type="button" class="cdl-09__danger">Archive</button></div>
    </div>
    <aside class="cdl-09__rail" aria-label="Quick actions">
      <h2>Quick actions</h2>
      <button type="button" class="cdl-09__qa"><b>＋ Add product</b><span>Catalog</span></button>
      <button type="button" class="cdl-09__qa"><b>⤓ Export orders</b><span>CSV · last 30d</span></button>
      <button type="button" class="cdl-09__qa"><b>% Create discount</b><span>Storewide or SKU</span></button>
      <h2 class="cdl-09__alerth">Inventory alerts</h2>
      <p class="cdl-09__alert"><b>Canvas Tote — Sand</b><span>3 left</span></p>
      <p class="cdl-09__alert"><b>Trail Bottle 750ml</b><span>7 left</span></p>
      <p class="cdl-09__alert"><b>Wool Runner 42</b><span>2 left</span></p>
    </aside>
  </div>
</section>
```
## CSS
```css
.cdl-09,
.cdl-09 *,
.cdl-09 *::before,
.cdl-09 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.cdl-09 {
  background: var(--bg);
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  --bg: oklch(0.977 0.006 85);
  --panel: oklch(1 0 0);
  --edge: oklch(0.9 0.015 85);
  --ink: oklch(0.27 0.02 60);
  --mut: oklch(0.54 0.03 60);
  --acc: oklch(0.6 0.14 65);
  --good: oklch(0.55 0.14 155);
  --warn: oklch(0.62 0.14 70);
  --bad: oklch(0.58 0.19 25);
  --ship: oklch(0.55 0.14 245);
  font-family: 'Segoe UI',system-ui,sans-serif;
  color: var(--ink);
  container-type: inline-size;
}

.cdl-09__panel {
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-columns: minmax(0,1fr) 250px;
  grid-template-rows: auto minmax(0,1fr);
  gap: 14px;
  border: 1px solid var(--edge);
  background: linear-gradient(175deg,var(--bg),oklch(0.96 0.008 85));
  padding: 16px;
  min-height: 540px;
}

.cdl-09__stats {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(160px,100%),1fr));
  gap: 12px;
}

.cdl-09__stats article {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 13px;
  padding: 13px 15px;
}

.cdl-09__stats h3 {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mut);
}

.cdl-09__stats p {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  margin: 4px 0 1px;
}

.cdl-09__stats small {
  font-size: 11px;
  color: var(--mut);
  font-weight: 600;
}

.cdl-09__up {
  color: var(--good) !important;
}

.cdl-09__warn {
  color: var(--warn) !important;
}

.cdl-09__card {
  position: relative;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cdl-09__thead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--edge);
  flex-wrap: wrap;
}

.cdl-09__thead h2 {
  font-size: 15px;
}

.cdl-09__filters {
  display: flex;
  gap: 4px;
  background: var(--bg);
  border: 1px solid var(--edge);
  border-radius: 10px;
  padding: 3px;
}

.cdl-09__filters button {
  border: none;
  background: transparent;
  font: 600 12px 'Segoe UI',system-ui,sans-serif;
  color: var(--mut);
  padding: 6px 11px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s,color .15s;
}

.cdl-09__filters button:hover {
  color: var(--ink);
}

.cdl-09__filters button:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: -2px;
}

.cdl-09__fon {
  background: var(--panel) !important;
  color: var(--ink) !important;
  box-shadow: 0 1px 3px oklch(0.4 0.04 60 / .2);
}

.cdl-09__tablewrap {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.cdl-09__tablewrap:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: -2px;
}

.cdl-09__card table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.cdl-09__card th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--mut);
  background: var(--panel);
  padding: 10px 14px;
  border-bottom: 1px solid var(--edge);
}

.cdl-09__card td {
  padding: 11px 14px;
  border-bottom: 1px solid color-mix(in oklch,var(--edge) 50%,transparent);
}

.cdl-09__card tbody tr:nth-child(even) {
  background: color-mix(in oklch,var(--bg) 55%,white);
}

.cdl-09__card tbody tr {
  transition: background .15s;
}

.cdl-09__card tbody tr:hover {
  background: color-mix(in oklch,var(--acc) 5%,white);
}

.cdl-09__card tbody tr:has(input:checked) {
  background: color-mix(in oklch,var(--acc) 8%,white);
}

.cdl-09__card tbody tr:has(input:checked) td:first-child {
  box-shadow: inset 3px 0 0 var(--acc);
}

.cdl-09__chk {
  width: 44px;
  text-align: center;
}

.cdl-09__card input[type=checkbox] {
  width: 16px;
  height: 16px;
  accent-color: var(--acc);
  cursor: pointer;
}

.cdl-09__card input[type=checkbox]:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

.cdl-09__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.cdl-09__pill {
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.cdl-09__paid {
  color: var(--good);
  background: color-mix(in oklch,var(--good) 12%,white);
}

.cdl-09__pend {
  color: oklch(0.52 0.12 70);
  background: color-mix(in oklch,var(--warn) 16%,white);
}

.cdl-09__ship {
  color: var(--ship);
  background: color-mix(in oklch,var(--ship) 11%,white);
}

.cdl-09__ref {
  color: var(--bad);
  background: color-mix(in oklch,var(--bad) 10%,white);
}

.cdl-09__bulk {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  background: oklch(0.25 0.03 60);
  color: oklch(0.97 0 0);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 16px 34px -14px oklch(0.2 0.05 60 / .6);
  translate: 0 130%;
  opacity: 0;
  transition: translate .28s cubic-bezier(.2,.7,.2,1),opacity .2s;
}

.cdl-09__card:has(tbody input:checked) .cdl-09__bulk {
  translate: 0 0;
  opacity: 1;
}

.cdl-09__bulk b {
  font-size: 12.5px;
  margin-right: auto;
}

.cdl-09__bulk button {
  border: 1px solid oklch(0.45 0.03 60);
  background: oklch(0.32 0.03 60);
  color: oklch(0.97 0 0);
  font: 600 12px 'Segoe UI',system-ui,sans-serif;
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
  transition: background .15s;
}

.cdl-09__bulk button:hover {
  background: oklch(0.38 0.04 60);
}

.cdl-09__bulk button:focus-visible {
  outline: 2px solid oklch(0.8 0.12 65);
  outline-offset: 2px;
}

.cdl-09__danger {
  border-color: color-mix(in oklch,var(--bad) 55%,transparent) !important;
  background: color-mix(in oklch,var(--bad) 30%,oklch(0.32 0.03 60)) !important;
}

.cdl-09__rail {
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 14px;
  padding: 16px;
  min-height: 0;
  overflow-y: auto;
}

.cdl-09__rail h2 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mut);
}

.cdl-09__alerth {
  margin-top: 10px;
}

.cdl-09__qa {
  display: grid;
  gap: 2px;
  text-align: left;
  border: 1px solid var(--edge);
  background: var(--bg);
  border-radius: 11px;
  padding: 11px 13px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s,translate .15s,background .15s;
}

.cdl-09__qa:hover {
  border-color: color-mix(in oklch,var(--acc) 50%,var(--edge));
  background: color-mix(in oklch,var(--acc) 5%,white);
  translate: 0 -1px;
}

.cdl-09__qa:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

.cdl-09__qa b {
  font-size: 12.5px;
  color: var(--ink);
}

.cdl-09__qa span {
  font-size: 11px;
  color: var(--mut);
}

.cdl-09__alert {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  padding: 9px 11px;
  border: 1px solid color-mix(in oklch,var(--warn) 30%,var(--edge));
  background: color-mix(in oklch,var(--warn) 7%,white);
  border-radius: 10px;
}

.cdl-09__alert b {
  font-weight: 600;
}

.cdl-09__alert span {
  color: oklch(0.5 0.12 70);
  font-weight: 700;
  white-space: nowrap;
}

@container (max-width: 720px) {
  .cdl-09__panel {
    grid-template-columns: minmax(0,1fr);
  }

  .cdl-09__rail {
    grid-row: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cdl-09 * {
    transition: none !important;
  }
}
```

How this works

The frame is a two-column grid with the table zone made shrinkable — the eternal prerequisite for tables in grids:

.panel{ display:grid; gap:14px;
  grid-template-columns: minmax(0,1fr) 250px; }
.tablewrap{ min-width:0; overflow-x:auto; }  /* wide table scrolls itself */

The bulk bar is the modern selector flex. It watches the entire tbody from outside it:

.bulk{ translate:0 110%; opacity:0;
  transition:translate .28s cubic-bezier(.2,.7,.2,1), opacity .2s; }
.card:has(tbody input:checked) .bulk{ translate:0 0; opacity:1; }

tr:has(input:checked){ background:color-mix(in oklch,var(--acc) 7%,white); }
tr:has(input:checked) td:first-child{ box-shadow:inset 3px 0 0 var(--acc); }

Before :has() this required change listeners, selection state, and a render pass — it is the single biggest JS deletion modern CSS offers dashboards. Checkboxes stay native and get their brand color from one line, accent-color:var(--acc), keeping every keyboard and screen-reader behavior the OS ships. Status pills derive tints from their base hue with color-mix(), so “Paid / Pending / Refunded” stay in one color family and pass contrast without hand-picking five hex codes.

Make it yours

  • Rail width: the 250px track; drop the rail entirely by deleting one column and the aside.
  • Bulk-bar actions are plain buttons — wire them up with whatever framework you already have; CSS handles show/hide.
  • Pill palette: each status is one base color token; the background is color-mix(in oklch, base 12%, white) — new statuses cost one line.
  • Add a select-all header checkbox and 4 lines of JS if you need tri-state; the CSS reveal keeps working unchanged.

Gotchas — read before shipping

  • :has() can get expensive when the subject set is huge — scope it (.card:has(tbody input:checked), not body:has(input:checked)) so the browser re-checks a small subtree.
  • Keep the checkbox column ≥44px and give each checkbox an aria-label naming the order — a bare unlabeled checkbox is an audit failure.
  • overflow-x:auto on the wrapper, never on the table — and pair it with min-width:0 on the grid track or the whole panel stretches instead.

Browser support

ChromeSafariFirefoxEdge
111+16.2+121+111+

:has() drives selection UI — Firefox 121+ (Dec 2023). accent-color is Chrome 93 / Safari 15.4 / Firefox 92. color-mix + oklch set the Chrome/Safari floor.

Techniques used in this demo

container queriesMDN ↗tabindexMDN ↗:has()MDN ↗role="" (ARIA)MDN ↗color-mix()MDN ↗grid-templateMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →