Open demo

CSS code

HTML 
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="i-grid" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3.5" width="7" height="7" rx="1.5"/><rect x="13.5" y="3.5" width="7" height="7" rx="1.5"/><rect x="3.5" y="13.5" width="7" height="7" rx="1.5"/><rect x="13.5" y="13.5" width="7" height="7" rx="1.5"/></symbol>
  <symbol id="i-cart" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4h2.5l2.2 11h10.6l2-8H6.3"/><circle cx="9.5" cy="19.5" r="1.3"/><circle cx="17" cy="19.5" r="1.3"/></symbol>
  <symbol id="i-users" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8.5" r="3.5"/><path d="M2.5 20c.6-3.6 3.2-5.5 6.5-5.5s5.9 1.9 6.5 5.5"/><path d="M16 5.2a3.3 3.3 0 0 1 0 6.6M18 14.8c2 .6 3.2 2.3 3.5 5.2"/></symbol>
  <symbol id="i-box" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3 20.5 7.5v9L12 21l-8.5-4.5v-9z"/><path d="M3.5 7.5 12 12l8.5-4.5M12 12v9"/></symbol>
  <symbol id="i-tag" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 12.2V4.5a1 1 0 0 1 1-1h7.7l8.3 8.3a1 1 0 0 1 0 1.4l-7.3 7.3a1 1 0 0 1-1.4 0z"/><circle cx="8" cy="8" r="1.4"/></symbol>
  <symbol id="i-chart" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4v16h16"/><path d="M8.5 16v-4M12.5 16V8M16.5 16v-6"/></symbol>
  <symbol id="i-trend" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 17 9 11.5l4 4 7.5-7.5"/><path d="M15 8h5.5v5.5"/></symbol>
  <symbol id="i-sliders" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h9M17 7h3M4 17h3M11 17h9"/><circle cx="15" cy="7" r="2"/><circle cx="9" cy="17" r="2"/></symbol>
  <symbol id="i-help" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="M9.6 9.5a2.5 2.5 0 0 1 4.8 1c0 1.7-2.4 2.2-2.4 3.7"/><path d="M12 17.3h.01"/></symbol>
  <symbol id="i-plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></symbol>
  <symbol id="i-home" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10.5 12 4l8.5 6.5V19.5a1 1 0 0 1-1 1h-5v-6h-5v6h-5a1 1 0 0 1-1-1z"/></symbol>
  <symbol id="i-tasks" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3.5" width="17" height="17" rx="3.5"/><path d="m8 12 3 3 5-6"/></symbol>
  <symbol id="i-inbox" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 13.5h5l1.5 2.5h4l1.5-2.5h5"/><path d="M5.8 5.5h12.4l2.3 8v5.5a1 1 0 0 1-1 1h-15a1 1 0 0 1-1-1v-5.5z"/></symbol>
  <symbol id="i-calendar" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="5" width="17" height="15.5" rx="2.5"/><path d="M3.5 10h17M8 3v4M16 3v4"/></symbol>
  <symbol id="i-receipt" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3.5h12v17l-2-1.3-2 1.3-2-1.3-2 1.3-2-1.3-2 1.3z"/><path d="M9 8.5h6M9 12h6"/></symbol>
  <symbol id="i-file" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 3.5h7l4 4v12a1 1 0 0 1-1 1h-10a1 1 0 0 1-1-1v-15a1 1 0 0 1 1-1z"/><path d="M13.5 3.5v4h4"/></symbol>
  <symbol id="i-card" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5.5" width="18" height="13" rx="2"/><path d="M3 10h18M7 15h3"/></symbol>
  <symbol id="i-send" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20.5 3.5 10 14M20.5 3.5l-6.5 17-4-6.5-6.5-4z"/></symbol>
  <symbol id="i-wallet" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7.5A2.5 2.5 0 0 1 6.5 5H18v3"/><rect x="4" y="8" width="16.5" height="11" rx="2"/><circle cx="16" cy="13.5" r="1.2"/></symbol>
</svg>
<div><span class="lbl">Sections with an accent bar</span>
<div class="app">
  <nav class="sb" aria-label="Northwind">
    <a class="sb-brand" href="#"><span class="sb-logo" aria-hidden="true">N</span>Northwind</a>
    <p class="sb-heading">Store</p>
    <ul class="sb-list">
      <li><a class="sb-link" href="#" aria-current="page"><svg aria-hidden="true"><use href="#i-grid"/></svg><span>Dashboard</span></a></li>
      <li><a class="sb-link" href="#"><svg aria-hidden="true"><use href="#i-cart"/></svg><span>Orders</span><span class="sb-count">12<span class="sr-only"> new</span></span></a></li>
      <li><a class="sb-link" href="#"><svg aria-hidden="true"><use href="#i-users"/></svg><span>Customers</span></a></li>
      <li><a class="sb-link" href="#"><svg aria-hidden="true"><use href="#i-box"/></svg><span>Products</span></a></li>
      <li><a class="sb-link" href="#"><svg aria-hidden="true"><use href="#i-tag"/></svg><span>Discounts</span></a></li>
    </ul>
    <p class="sb-heading">Reports</p>
    <ul class="sb-list">
      <li><a class="sb-link" href="#"><svg aria-hidden="true"><use href="#i-chart"/></svg><span>Analytics</span></a></li>
      <li><a class="sb-link" href="#"><svg aria-hidden="true"><use href="#i-trend"/></svg><span>Revenue</span></a></li>
    </ul>
    <ul class="sb-list sb-foot">
      <li><a class="sb-link" href="#"><svg aria-hidden="true"><use href="#i-sliders"/></svg><span>Settings</span></a></li>
      <li><a class="sb-link" href="#"><svg aria-hidden="true"><use href="#i-help"/></svg><span>Help centre</span></a></li>
    </ul>
  </nav>
  <div class="pg" style="--pg-bar:#c7d2fe">
    <div class="pg-head"><div><p class="pg-kicker">Northwind store · Tuesday 14 October</p><h2 class="pg-title">Dashboard</h2></div><span class="pg-chip">Last 7 days</span></div>
    <div class="pg-tiles"><div class="pg-tile"><span>Revenue</span><b>$48,210</b><em>+12.4%</em></div><div class="pg-tile"><span>Orders</span><b>1,284</b><em>+8.1%</em></div><div class="pg-tile"><span>Returning customers</span><b>38%</b><em>+2.6 pts</em></div></div>
    <div class="pg-chart" aria-hidden="true"><i style="height:38%"></i><i style="height:52%"></i><i style="height:44%"></i><i style="height:70%"></i><i style="height:58%"></i><i style="height:82%"></i><i style="height:64%"></i><i style="height:90%"></i><i style="height:72%"></i><i style="height:60%"></i><i style="height:78%"></i><i style="height:94%"></i></div>
  </div>
</div></div>
<div><span class="lbl">Filled pill with counts and project colours</span>
<div class="app">
  <nav class="sb sb-pill" aria-label="Fieldwork">
    <a class="sb-brand" href="#"><span class="sb-logo" aria-hidden="true">F</span>Fieldwork</a>
    <button class="sb-cta" type="button"><svg aria-hidden="true"><use href="#i-plus"/></svg>New task</button>
    <ul class="sb-list">
      <li><a class="sb-link" href="#" aria-current="page"><svg aria-hidden="true"><use href="#i-home"/></svg><span>Home</span></a></li>
      <li><a class="sb-link" href="#"><svg aria-hidden="true"><use href="#i-tasks"/></svg><span>My tasks</span><span class="sb-count">8<span class="sr-only"> open</span></span></a></li>
      <li><a class="sb-link" href="#"><svg aria-hidden="true"><use href="#i-inbox"/></svg><span>Inbox</span><span class="sb-count">3<span class="sr-only"> unread</span></span></a></li>
      <li><a class="sb-link" href="#"><svg aria-hidden="true"><use href="#i-calendar"/></svg><span>Calendar</span></a></li>
    </ul>
    <p class="sb-heading">Projects</p>
    <ul class="sb-list">
      <li><a class="sb-link" href="#"><span class="sb-swatch" style="background:#6366f1"></span><span>Website relaunch</span></a></li>
      <li><a class="sb-link" href="#"><span class="sb-swatch" style="background:#f59e0b"></span><span>Q4 campaign</span></a></li>
      <li><a class="sb-link" href="#"><span class="sb-swatch" style="background:#10b981"></span><span>Mobile app 2.0</span></a></li>
    </ul>
    <ul class="sb-list sb-foot">
      <li><a class="sb-link" href="#"><svg aria-hidden="true"><use href="#i-sliders"/></svg><span>Settings</span></a></li>
    </ul>
  </nav>
  <div class="pg" style="--pg-bar:#a5b4fc">
    <div class="pg-head"><div><p class="pg-kicker">Fieldwork · Week 42</p><h2 class="pg-title">Good morning, Maya</h2></div><span class="pg-chip">5 due today</span></div>
    <div class="pg-tiles"><div class="pg-tile"><span>Due today</span><b>5</b></div><div class="pg-tile"><span>Completed this week</span><b>23</b><em>+6 on last week</em></div><div class="pg-tile"><span>Overdue</span><b>2</b></div></div>
    <div class="pg-chart" aria-hidden="true"><i style="height:30%"></i><i style="height:45%"></i><i style="height:62%"></i><i style="height:40%"></i><i style="height:75%"></i><i style="height:55%"></i><i style="height:68%"></i><i style="height:84%"></i><i style="height:50%"></i><i style="height:66%"></i><i style="height:72%"></i><i style="height:58%"></i></div>
  </div>
</div></div>
<div><span class="lbl">Compact with dividers and a dot marker</span>
<div class="app">
  <nav class="sb sb-compact" aria-label="Ledger">
    <a class="sb-brand" href="#"><span class="sb-logo" aria-hidden="true">L</span>Ledger</a>
    <ul class="sb-list">
      <li><a class="sb-link" href="#" aria-current="page"><svg aria-hidden="true"><use href="#i-grid"/></svg><span>Overview</span></a></li>
      <li><a class="sb-link" href="#"><svg aria-hidden="true"><use href="#i-receipt"/></svg><span>Transactions</span></a></li>
      <li><a class="sb-link" href="#"><svg aria-hidden="true"><use href="#i-file"/></svg><span>Invoices</span><span class="sb-meta">4 due</span></a></li>
      <li><a class="sb-link" href="#"><svg aria-hidden="true"><use href="#i-card"/></svg><span>Cards</span></a></li>
      <li><a class="sb-link" href="#"><svg aria-hidden="true"><use href="#i-send"/></svg><span>Payees</span></a></li>
    </ul>
    <p class="sb-heading">Accounts</p>
    <ul class="sb-list">
      <li><a class="sb-link" href="#"><svg aria-hidden="true"><use href="#i-wallet"/></svg><span>Operating</span><span class="sb-meta">$84,120</span></a></li>
      <li><a class="sb-link" href="#"><svg aria-hidden="true"><use href="#i-wallet"/></svg><span>Payroll</span><span class="sb-meta">$31,480</span></a></li>
      <li><a class="sb-link" href="#"><svg aria-hidden="true"><use href="#i-wallet"/></svg><span>Tax reserve</span><span class="sb-meta">$12,900</span></a></li>
    </ul>
    <ul class="sb-list sb-foot">
      <li><a class="sb-link" href="#"><svg aria-hidden="true"><use href="#i-sliders"/></svg><span>Settings</span></a></li>
    </ul>
  </nav>
  <div class="pg" style="--pg-bar:#a7f3d0">
    <div class="pg-head"><div><p class="pg-kicker">Ledger · All accounts</p><h2 class="pg-title">Overview</h2></div><span class="pg-chip">October 2026</span></div>
    <div class="pg-tiles"><div class="pg-tile"><span>Cash on hand</span><b>$128,500</b></div><div class="pg-tile"><span>Money in</span><b>$64,210</b><em>+4.2%</em></div><div class="pg-tile"><span>Money out</span><b>$41,380</b></div></div>
    <div class="pg-chart" aria-hidden="true"><i style="height:60%"></i><i style="height:48%"></i><i style="height:72%"></i><i style="height:66%"></i><i style="height:54%"></i><i style="height:80%"></i><i style="height:62%"></i><i style="height:70%"></i><i style="height:58%"></i><i style="height:86%"></i><i style="height:74%"></i><i style="height:68%"></i></div>
  </div>
</div></div>
CSS 
/* App shell: sidebar and content side by side; they stack under 640px. */
.app{display:flex;height:520px;background:#fff;border:1px solid #d6dce5;border-radius:16px;overflow:hidden;
  box-shadow:0 1px 2px rgba(15,23,42,.05),0 18px 40px -22px rgba(15,23,42,.28)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Sidebar */
.sb{--sb-bg:#fff;--sb-line:#e5e9f0;--sb-ink:#475569;--sb-strong:#0f172a;--sb-muted:#5b6474;--sb-hover:#f1f5f9;
  --sb-accent:#4f46e5;--sb-active-bg:#eef2ff;--sb-active-ink:#4338ca;
  flex:0 0 248px;display:flex;flex-direction:column;padding:18px 14px;background:var(--sb-bg);
  border-right:1px solid var(--sb-line);overflow-y:auto;font-size:.875rem}
.sb-brand{display:flex;align-items:center;gap:10px;padding:2px 10px 12px;font-size:1rem;font-weight:700;
  letter-spacing:-.01em;color:var(--sb-strong);text-decoration:none;border-radius:8px}
.sb-logo{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--sb-accent);
  color:#fff;font-size:.85rem;font-weight:800}
.sb-heading{margin:16px 0 6px;padding:0 12px;font-size:.6875rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--sb-muted)}
.sb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.sb-link{position:relative;display:flex;align-items:center;gap:11px;padding:8px 12px;border-radius:8px;
  color:var(--sb-ink);font-weight:500;text-decoration:none;transition:background-color .15s,color .15s}
.sb-link svg{width:18px;height:18px;flex:none}
.sb-link:hover{background:var(--sb-hover);color:var(--sb-strong)}
.sb-link:focus-visible,.sb-brand:focus-visible,.sb-cta:focus-visible{outline:2px solid var(--sb-accent);outline-offset:2px}
.sb-link[aria-current="page"]{background:var(--sb-active-bg);color:var(--sb-active-ink);font-weight:600}
.sb-link[aria-current="page"]::before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:3px;
  border-radius:0 3px 3px 0;background:var(--sb-accent)}
.sb-count{margin-left:auto;min-width:22px;padding:1px 7px;border-radius:999px;background:#e9edf3;color:#334155;
  font-size:.72rem;font-weight:600;text-align:center}
.sb-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--sb-line)}

/* Filled pill: tinted rail, solid active item, colour squares for projects */
.sb-pill{--sb-bg:#f5f6f9;--sb-hover:#e8ebf1;flex-basis:240px}
.sb-pill .sb-link[aria-current="page"]{background:var(--sb-accent);color:#fff;box-shadow:0 6px 14px -6px rgba(79,70,229,.7)}
.sb-pill .sb-link[aria-current="page"]::before{content:none}
.sb-pill .sb-link[aria-current="page"] .sb-count{background:#fff;color:var(--sb-active-ink)}
.sb-swatch{width:10px;height:10px;margin:0 4px;border-radius:3px;flex:none}
.sb-cta{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 6px;padding:8px 12px;border:1px solid #cfd5df;
  border-radius:8px;background:#fff;color:var(--sb-strong);font:inherit;font-weight:600;cursor:pointer;transition:border-color .15s}
.sb-cta:hover{border-color:#a3acba}
.sb-cta svg{width:16px;height:16px}

/* Compact: smaller type, hairline dividers, a dot marks the current page */
.sb-compact{flex-basis:216px;padding:14px 10px;font-size:.8125rem}
.sb-compact .sb-link{gap:9px;padding:6px 10px}
.sb-compact .sb-link svg{width:16px;height:16px}
.sb-compact .sb-heading{margin:12px 0 4px;padding:12px 10px 0;border-top:1px solid var(--sb-line)}
.sb-compact .sb-link[aria-current="page"]{background:none;color:var(--sb-strong);font-weight:650}
.sb-compact .sb-link[aria-current="page"]::before{left:auto;right:10px;top:50%;bottom:auto;width:6px;height:6px;
  margin-top:-3px;border-radius:50%}
.sb-compact .sb-link[aria-current="page"]:hover{background:var(--sb-hover)}
.sb-meta{margin-left:auto;font-size:.72rem;color:var(--sb-muted);font-variant-numeric:tabular-nums}
.sb-compact .sb-foot{border-top:0}

@media (max-width:640px){
  .app{flex-direction:column;height:auto}
  .sb{flex-basis:auto;border-right:0;border-bottom:1px solid var(--sb-line)}
}
@media (prefers-reduced-motion:reduce){.sb-link,.sb-cta{transition:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="i-grid" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3.5" width="7" height="7" rx="1.5"/><rect x="13.5" y="3.5" width="7" height="7" rx="1.5"/><rect x="3.5" y="13.5" width="7" height="7" rx="1.5"/><rect x="13.5" y="13.5" width="7" height="7" rx="1.5"/></symbol>
  <symbol id="i-cart" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4h2.5l2.2 11h10.6l2-8H6.3"/><circle cx="9.5" cy="19.5" r="1.3"/><circle cx="17" cy="19.5" r="1.3"/></symbol>
  <symbol id="i-users" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8.5" r="3.5"/><path d="M2.5 20c.6-3.6 3.2-5.5 6.5-5.5s5.9 1.9 6.5 5.5"/><path d="M16 5.2a3.3 3.3 0 0 1 0 6.6M18 14.8c2 .6 3.2 2.3 3.5 5.2"/></symbol>
  <symbol id="i-box" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3 20.5 7.5v9L12 21l-8.5-4.5v-9z"/><path d="M3.5 7.5 12 12l8.5-4.5M12 12v9"/></symbol>
  <symbol id="i-tag" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 12.2V4.5a1 1 0 0 1 1-1h7.7l8.3 8.3a1 1 0 0 1 0 1.4l-7.3 7.3a1 1 0 0 1-1.4 0z"/><circle cx="8" cy="8" r="1.4"/></symbol>
  <symbol id="i-chart" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4v16h16"/><path d="M8.5 16v-4M12.5 16V8M16.5 16v-6"/></symbol>
  <symbol id="i-trend" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 17 9 11.5l4 4 7.5-7.5"/><path d="M15 8h5.5v5.5"/></symbol>
  <symbol id="i-sliders" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h9M17 7h3M4 17h3M11 17h9"/><circle cx="15" cy="7" r="2"/><circle cx="9" cy="17" r="2"/></symbol>
  <symbol id="i-help" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="M9.6 9.5a2.5 2.5 0 0 1 4.8 1c0 1.7-2.4 2.2-2.4 3.7"/><path d="M12 17.3h.01"/></symbol>
  <symbol id="i-plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></symbol>
  <symbol id="i-home" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10.5 12 4l8.5 6.5V19.5a1 1 0 0 1-1 1h-5v-6h-5v6h-5a1 1 0 0 1-1-1z"/></symbol>
  <symbol id="i-tasks" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3.5" width="17" height="17" rx="3.5"/><path d="m8 12 3 3 5-6"/></symbol>
  <symbol id="i-inbox" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 13.5h5l1.5 2.5h4l1.5-2.5h5"/><path d="M5.8 5.5h12.4l2.3 8v5.5a1 1 0 0 1-1 1h-15a1 1 0 0 1-1-1v-5.5z"/></symbol>
  <symbol id="i-calendar" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="5" width="17" height="15.5" rx="2.5"/><path d="M3.5 10h17M8 3v4M16 3v4"/></symbol>
  <symbol id="i-receipt" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3.5h12v17l-2-1.3-2 1.3-2-1.3-2 1.3-2-1.3-2 1.3z"/><path d="M9 8.5h6M9 12h6"/></symbol>
  <symbol id="i-file" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 3.5h7l4 4v12a1 1 0 0 1-1 1h-10a1 1 0 0 1-1-1v-15a1 1 0 0 1 1-1z"/><path d="M13.5 3.5v4h4"/></symbol>
  <symbol id="i-card" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5.5" width="18" height="13" rx="2"/><path d="M3 10h18M7 15h3"/></symbol>
  <symbol id="i-send" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20.5 3.5 10 14M20.5 3.5l-6.5 17-4-6.5-6.5-4z"/></symbol>
  <symbol id="i-wallet" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7.5A2.5 2.5 0 0 1 6.5 5H18v3"/><rect x="4" y="8" width="16.5" height="11" rx="2"/><circle cx="16" cy="13.5" r="1.2"/></symbol>
</svg>
<div><span class="lbl">Sections with an accent bar</span>
<div class="app d-flex">
  <nav class="sb d-flex flex-column" aria-label="Northwind">
    <a class="sb-brand d-flex align-items-center gap-2 text-decoration-none" href="#"><span class="sb-logo d-grid text-white" style="place-items:center" aria-hidden="true">N</span>Northwind</a>
    <p class="sb-heading">Store</p>
    <ul class="nav nav-pills flex-column">
      <li class="nav-item"><a class="nav-link d-flex align-items-center active" href="#" aria-current="page"><svg aria-hidden="true"><use href="#i-grid"/></svg><span>Dashboard</span></a></li>
      <li class="nav-item"><a class="nav-link d-flex align-items-center" href="#"><svg aria-hidden="true"><use href="#i-cart"/></svg><span>Orders</span><span class="badge rounded-pill ms-auto">12<span class="visually-hidden"> new</span></span></a></li>
      <li class="nav-item"><a class="nav-link d-flex align-items-center" href="#"><svg aria-hidden="true"><use href="#i-users"/></svg><span>Customers</span></a></li>
      <li class="nav-item"><a class="nav-link d-flex align-items-center" href="#"><svg aria-hidden="true"><use href="#i-box"/></svg><span>Products</span></a></li>
      <li class="nav-item"><a class="nav-link d-flex align-items-center" href="#"><svg aria-hidden="true"><use href="#i-tag"/></svg><span>Discounts</span></a></li>
    </ul>
    <p class="sb-heading">Reports</p>
    <ul class="nav nav-pills flex-column">
      <li class="nav-item"><a class="nav-link d-flex align-items-center" href="#"><svg aria-hidden="true"><use href="#i-chart"/></svg><span>Analytics</span></a></li>
      <li class="nav-item"><a class="nav-link d-flex align-items-center" href="#"><svg aria-hidden="true"><use href="#i-trend"/></svg><span>Revenue</span></a></li>
    </ul>
    <ul class="nav nav-pills flex-column sb-foot mt-auto">
      <li class="nav-item"><a class="nav-link d-flex align-items-center" href="#"><svg aria-hidden="true"><use href="#i-sliders"/></svg><span>Settings</span></a></li>
      <li class="nav-item"><a class="nav-link d-flex align-items-center" href="#"><svg aria-hidden="true"><use href="#i-help"/></svg><span>Help centre</span></a></li>
    </ul>
  </nav>
  <div class="pg" style="--pg-bar:#c7d2fe">
    <div class="pg-head"><div><p class="pg-kicker">Northwind store · Tuesday 14 October</p><h2 class="pg-title">Dashboard</h2></div><span class="pg-chip">Last 7 days</span></div>
    <div class="pg-tiles"><div class="pg-tile"><span>Revenue</span><b>$48,210</b><em>+12.4%</em></div><div class="pg-tile"><span>Orders</span><b>1,284</b><em>+8.1%</em></div><div class="pg-tile"><span>Returning customers</span><b>38%</b><em>+2.6 pts</em></div></div>
    <div class="pg-chart" aria-hidden="true"><i style="height:38%"></i><i style="height:52%"></i><i style="height:44%"></i><i style="height:70%"></i><i style="height:58%"></i><i style="height:82%"></i><i style="height:64%"></i><i style="height:90%"></i><i style="height:72%"></i><i style="height:60%"></i><i style="height:78%"></i><i style="height:94%"></i></div>
  </div>
</div></div>
<div><span class="lbl">Filled pill with counts and project colours</span>
<div class="app d-flex">
  <nav class="sb sb-pill d-flex flex-column" aria-label="Fieldwork">
    <a class="sb-brand d-flex align-items-center gap-2 text-decoration-none" href="#"><span class="sb-logo d-grid text-white" style="place-items:center" aria-hidden="true">F</span>Fieldwork</a>
    <button class="btn sb-cta d-flex align-items-center justify-content-center gap-2" type="button"><svg aria-hidden="true"><use href="#i-plus"/></svg>New task</button>
    <ul class="nav nav-pills flex-column">
      <li class="nav-item"><a class="nav-link d-flex align-items-center active" href="#" aria-current="page"><svg aria-hidden="true"><use href="#i-home"/></svg><span>Home</span></a></li>
      <li class="nav-item"><a class="nav-link d-flex align-items-center" href="#"><svg aria-hidden="true"><use href="#i-tasks"/></svg><span>My tasks</span><span class="badge rounded-pill ms-auto">8<span class="visually-hidden"> open</span></span></a></li>
      <li class="nav-item"><a class="nav-link d-flex align-items-center" href="#"><svg aria-hidden="true"><use href="#i-inbox"/></svg><span>Inbox</span><span class="badge rounded-pill ms-auto">3<span class="visually-hidden"> unread</span></span></a></li>
      <li class="nav-item"><a class="nav-link d-flex align-items-center" href="#"><svg aria-hidden="true"><use href="#i-calendar"/></svg><span>Calendar</span></a></li>
    </ul>
    <p class="sb-heading">Projects</p>
    <ul class="nav nav-pills flex-column">
      <li class="nav-item"><a class="nav-link d-flex align-items-center" href="#"><span class="sb-swatch" style="background:#6366f1"></span><span>Website relaunch</span></a></li>
      <li class="nav-item"><a class="nav-link d-flex align-items-center" href="#"><span class="sb-swatch" style="background:#f59e0b"></span><span>Q4 campaign</span></a></li>
      <li class="nav-item"><a class="nav-link d-flex align-items-center" href="#"><span class="sb-swatch" style="background:#10b981"></span><span>Mobile app 2.0</span></a></li>
    </ul>
    <ul class="nav nav-pills flex-column sb-foot mt-auto">
      <li class="nav-item"><a class="nav-link d-flex align-items-center" href="#"><svg aria-hidden="true"><use href="#i-sliders"/></svg><span>Settings</span></a></li>
    </ul>
  </nav>
  <div class="pg" style="--pg-bar:#a5b4fc">
    <div class="pg-head"><div><p class="pg-kicker">Fieldwork · Week 42</p><h2 class="pg-title">Good morning, Maya</h2></div><span class="pg-chip">5 due today</span></div>
    <div class="pg-tiles"><div class="pg-tile"><span>Due today</span><b>5</b></div><div class="pg-tile"><span>Completed this week</span><b>23</b><em>+6 on last week</em></div><div class="pg-tile"><span>Overdue</span><b>2</b></div></div>
    <div class="pg-chart" aria-hidden="true"><i style="height:30%"></i><i style="height:45%"></i><i style="height:62%"></i><i style="height:40%"></i><i style="height:75%"></i><i style="height:55%"></i><i style="height:68%"></i><i style="height:84%"></i><i style="height:50%"></i><i style="height:66%"></i><i style="height:72%"></i><i style="height:58%"></i></div>
  </div>
</div></div>
<div><span class="lbl">Compact with dividers and a dot marker</span>
<div class="app d-flex">
  <nav class="sb sb-compact d-flex flex-column" aria-label="Ledger">
    <a class="sb-brand d-flex align-items-center gap-2 text-decoration-none" href="#"><span class="sb-logo d-grid text-white" style="place-items:center" aria-hidden="true">L</span>Ledger</a>
    <ul class="nav nav-pills flex-column">
      <li class="nav-item"><a class="nav-link d-flex align-items-center active" href="#" aria-current="page"><svg aria-hidden="true"><use href="#i-grid"/></svg><span>Overview</span></a></li>
      <li class="nav-item"><a class="nav-link d-flex align-items-center" href="#"><svg aria-hidden="true"><use href="#i-receipt"/></svg><span>Transactions</span></a></li>
      <li class="nav-item"><a class="nav-link d-flex align-items-center" href="#"><svg aria-hidden="true"><use href="#i-file"/></svg><span>Invoices</span><span class="sb-meta ms-auto">4 due</span></a></li>
      <li class="nav-item"><a class="nav-link d-flex align-items-center" href="#"><svg aria-hidden="true"><use href="#i-card"/></svg><span>Cards</span></a></li>
      <li class="nav-item"><a class="nav-link d-flex align-items-center" href="#"><svg aria-hidden="true"><use href="#i-send"/></svg><span>Payees</span></a></li>
    </ul>
    <p class="sb-heading">Accounts</p>
    <ul class="nav nav-pills flex-column">
      <li class="nav-item"><a class="nav-link d-flex align-items-center" href="#"><svg aria-hidden="true"><use href="#i-wallet"/></svg><span>Operating</span><span class="sb-meta ms-auto">$84,120</span></a></li>
      <li class="nav-item"><a class="nav-link d-flex align-items-center" href="#"><svg aria-hidden="true"><use href="#i-wallet"/></svg><span>Payroll</span><span class="sb-meta ms-auto">$31,480</span></a></li>
      <li class="nav-item"><a class="nav-link d-flex align-items-center" href="#"><svg aria-hidden="true"><use href="#i-wallet"/></svg><span>Tax reserve</span><span class="sb-meta ms-auto">$12,900</span></a></li>
    </ul>
    <ul class="nav nav-pills flex-column sb-foot mt-auto">
      <li class="nav-item"><a class="nav-link d-flex align-items-center" href="#"><svg aria-hidden="true"><use href="#i-sliders"/></svg><span>Settings</span></a></li>
    </ul>
  </nav>
  <div class="pg" style="--pg-bar:#a7f3d0">
    <div class="pg-head"><div><p class="pg-kicker">Ledger · All accounts</p><h2 class="pg-title">Overview</h2></div><span class="pg-chip">October 2026</span></div>
    <div class="pg-tiles"><div class="pg-tile"><span>Cash on hand</span><b>$128,500</b></div><div class="pg-tile"><span>Money in</span><b>$64,210</b><em>+4.2%</em></div><div class="pg-tile"><span>Money out</span><b>$41,380</b></div></div>
    <div class="pg-chart" aria-hidden="true"><i style="height:60%"></i><i style="height:48%"></i><i style="height:72%"></i><i style="height:66%"></i><i style="height:54%"></i><i style="height:80%"></i><i style="height:62%"></i><i style="height:70%"></i><i style="height:58%"></i><i style="height:86%"></i><i style="height:74%"></i><i style="height:68%"></i></div>
  </div>
</div></div>
CSS 
/* App shell: .d-flex row that stacks under 640px. The sidebar is Bootstrap's .nav-pills, restyled through its variables. */
.app{height:520px;background:#fff;border:1px solid #d6dce5;border-radius:16px;overflow:hidden;
  box-shadow:0 1px 2px rgba(15,23,42,.05),0 18px 40px -22px rgba(15,23,42,.28)}
.sb{--sb-bg:#fff;--sb-line:#e5e9f0;--sb-strong:#0f172a;--sb-muted:#5b6474;--sb-hover:#f1f5f9;--sb-accent:#4f46e5;--sb-active-ink:#4338ca;
  flex:0 0 248px;padding:18px 14px;background:var(--sb-bg);border-right:1px solid var(--sb-line);overflow-y:auto;font-size:.875rem}
.sb-brand{padding:2px 10px 12px;font-size:1rem;font-weight:700;letter-spacing:-.01em;color:var(--sb-strong);border-radius:8px}
.sb-logo{width:30px;height:30px;border-radius:9px;background:var(--sb-accent);font-size:.85rem;font-weight:800}
.sb-heading{margin:16px 0 6px;padding:0 12px;font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sb-muted)}
.sb .nav{--bs-nav-link-color:#475569;--bs-nav-link-hover-color:var(--sb-strong);--bs-nav-link-padding-x:12px;--bs-nav-link-padding-y:8px;
  --bs-nav-link-font-size:.875rem;--bs-nav-link-font-weight:500;--bs-nav-pills-border-radius:8px;
  --bs-nav-pills-link-active-bg:#eef2ff;--bs-nav-pills-link-active-color:var(--sb-active-ink);gap:2px;flex-wrap:nowrap}
.sb .nav-link{position:relative;gap:11px;line-height:1.5}
.sb .nav-link svg{width:18px;height:18px;flex:none}
.sb .nav-link:not(.active):hover{background:var(--sb-hover)}
.sb .nav-link:focus-visible,.sb-brand:focus-visible,.sb-cta:focus-visible{box-shadow:none;outline:2px solid var(--sb-accent);outline-offset:2px}
.sb .nav-link.active{font-weight:600}
.sb .nav-link.active::before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--sb-accent)}
.sb .badge{min-width:22px;padding:2px 7px;background:#e9edf3;color:#334155;font-size:.72rem;font-weight:600;line-height:1.4}
.sb-foot{padding-top:12px;border-top:1px solid var(--sb-line)}

/* Filled pill */
.sb-pill{--sb-bg:#f5f6f9;--sb-hover:#e8ebf1;flex-basis:240px}
.sb-pill .nav{--bs-nav-pills-link-active-bg:var(--sb-accent);--bs-nav-pills-link-active-color:#fff}
.sb-pill .nav-link.active{box-shadow:0 6px 14px -6px rgba(79,70,229,.7)}
.sb-pill .nav-link.active::before{content:none}
.sb-pill .nav-link.active .badge{background:#fff;color:var(--sb-active-ink)}
.sb-swatch{width:10px;height:10px;margin:0 4px;border-radius:3px;flex:none}
.sb-cta{--bs-btn-padding-y:8px;--bs-btn-font-size:.875rem;--bs-btn-font-weight:600;--bs-btn-border-color:#cfd5df;--bs-btn-hover-border-color:#a3acba;
  --bs-btn-bg:#fff;--bs-btn-hover-bg:#fff;--bs-btn-color:var(--sb-strong);--bs-btn-hover-color:var(--sb-strong);--bs-btn-border-radius:8px;margin-bottom:6px}
.sb-cta svg{width:16px;height:16px}

/* Compact */
.sb-compact{flex-basis:216px;padding:14px 10px;font-size:.8125rem}
.sb-compact .nav{--bs-nav-link-padding-x:10px;--bs-nav-link-padding-y:6px;--bs-nav-link-font-size:.8125rem;
  --bs-nav-pills-link-active-bg:transparent;--bs-nav-pills-link-active-color:var(--sb-strong)}
.sb-compact .nav-link{gap:9px}
.sb-compact .nav-link svg{width:16px;height:16px}
.sb-compact .sb-heading{margin:12px 0 4px;padding:12px 10px 0;border-top:1px solid var(--sb-line)}
.sb-compact .nav-link.active{font-weight:650}
.sb-compact .nav-link.active:hover{background:var(--sb-hover)}
.sb-compact .nav-link.active::before{left:auto;right:10px;top:50%;bottom:auto;width:6px;height:6px;margin-top:-3px;border-radius:50%}
.sb-meta{font-size:.72rem;color:var(--sb-muted);font-variant-numeric:tabular-nums}
.sb-compact .sb-foot{border-top:0}

@media (max-width:640px){
  .app{flex-direction:column!important;height:auto}
  .sb{flex-basis:auto;border-right:0;border-bottom:1px solid var(--sb-line)}
}
@media (prefers-reduced-motion:reduce){.sb .nav-link,.sb-cta{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="i-grid" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3.5" width="7" height="7" rx="1.5"/><rect x="13.5" y="3.5" width="7" height="7" rx="1.5"/><rect x="3.5" y="13.5" width="7" height="7" rx="1.5"/><rect x="13.5" y="13.5" width="7" height="7" rx="1.5"/></symbol>
  <symbol id="i-cart" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4h2.5l2.2 11h10.6l2-8H6.3"/><circle cx="9.5" cy="19.5" r="1.3"/><circle cx="17" cy="19.5" r="1.3"/></symbol>
  <symbol id="i-users" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8.5" r="3.5"/><path d="M2.5 20c.6-3.6 3.2-5.5 6.5-5.5s5.9 1.9 6.5 5.5"/><path d="M16 5.2a3.3 3.3 0 0 1 0 6.6M18 14.8c2 .6 3.2 2.3 3.5 5.2"/></symbol>
  <symbol id="i-box" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3 20.5 7.5v9L12 21l-8.5-4.5v-9z"/><path d="M3.5 7.5 12 12l8.5-4.5M12 12v9"/></symbol>
  <symbol id="i-tag" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 12.2V4.5a1 1 0 0 1 1-1h7.7l8.3 8.3a1 1 0 0 1 0 1.4l-7.3 7.3a1 1 0 0 1-1.4 0z"/><circle cx="8" cy="8" r="1.4"/></symbol>
  <symbol id="i-chart" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4v16h16"/><path d="M8.5 16v-4M12.5 16V8M16.5 16v-6"/></symbol>
  <symbol id="i-trend" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 17 9 11.5l4 4 7.5-7.5"/><path d="M15 8h5.5v5.5"/></symbol>
  <symbol id="i-sliders" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h9M17 7h3M4 17h3M11 17h9"/><circle cx="15" cy="7" r="2"/><circle cx="9" cy="17" r="2"/></symbol>
  <symbol id="i-help" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="M9.6 9.5a2.5 2.5 0 0 1 4.8 1c0 1.7-2.4 2.2-2.4 3.7"/><path d="M12 17.3h.01"/></symbol>
  <symbol id="i-plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></symbol>
  <symbol id="i-home" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10.5 12 4l8.5 6.5V19.5a1 1 0 0 1-1 1h-5v-6h-5v6h-5a1 1 0 0 1-1-1z"/></symbol>
  <symbol id="i-tasks" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3.5" width="17" height="17" rx="3.5"/><path d="m8 12 3 3 5-6"/></symbol>
  <symbol id="i-inbox" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 13.5h5l1.5 2.5h4l1.5-2.5h5"/><path d="M5.8 5.5h12.4l2.3 8v5.5a1 1 0 0 1-1 1h-15a1 1 0 0 1-1-1v-5.5z"/></symbol>
  <symbol id="i-calendar" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="5" width="17" height="15.5" rx="2.5"/><path d="M3.5 10h17M8 3v4M16 3v4"/></symbol>
  <symbol id="i-receipt" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3.5h12v17l-2-1.3-2 1.3-2-1.3-2 1.3-2-1.3-2 1.3z"/><path d="M9 8.5h6M9 12h6"/></symbol>
  <symbol id="i-file" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 3.5h7l4 4v12a1 1 0 0 1-1 1h-10a1 1 0 0 1-1-1v-15a1 1 0 0 1 1-1z"/><path d="M13.5 3.5v4h4"/></symbol>
  <symbol id="i-card" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5.5" width="18" height="13" rx="2"/><path d="M3 10h18M7 15h3"/></symbol>
  <symbol id="i-send" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20.5 3.5 10 14M20.5 3.5l-6.5 17-4-6.5-6.5-4z"/></symbol>
  <symbol id="i-wallet" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7.5A2.5 2.5 0 0 1 6.5 5H18v3"/><rect x="4" y="8" width="16.5" height="11" rx="2"/><circle cx="16" cy="13.5" r="1.2"/></symbol>
</svg>
<div><span class="mb-3.5 block text-[.72rem] tracking-[.12em] text-[#5b6474] uppercase">Sections with an accent bar</span>
<div class="flex h-[520px] overflow-hidden rounded-2xl border border-[#d6dce5] bg-white shadow-[0_1px_2px_rgba(15,23,42,.05),0_18px_40px_-22px_rgba(15,23,42,.28)] max-[640px]:h-auto max-[640px]:flex-col">
  <nav class="flex flex-none flex-col overflow-y-auto border-r border-[#e5e9f0] basis-[248px] bg-white px-3.5 py-[18px] text-[.875rem] max-[640px]:basis-auto max-[640px]:border-r-0 max-[640px]:border-b" aria-label="Northwind">
    <a class="flex items-center gap-2.5 rounded-lg px-2.5 pt-0.5 pb-3 text-[1rem] font-bold tracking-[-.01em] text-[#0f172a] no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5]" href="#"><span class="grid size-[30px] place-items-center rounded-[9px] bg-[#4f46e5] text-[.85rem] font-extrabold text-white" aria-hidden="true">N</span>Northwind</a>
    <p class="mt-4 mb-1.5 px-3 text-[.6875rem] font-bold tracking-[.08em] text-[#5b6474] uppercase">Store</p>
    <ul class="m-0 flex list-none flex-col gap-0.5 p-0">
      <li><a class="group relative flex items-center rounded-lg font-medium text-[#475569] no-underline transition-colors duration-150 hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] motion-reduce:transition-none gap-[11px] px-3 py-2 hover:bg-[#f1f5f9] aria-[current=page]:bg-[#eef2ff] aria-[current=page]:text-[#4338ca] aria-[current=page]:font-semibold aria-[current=page]:before:absolute aria-[current=page]:before:inset-y-2 aria-[current=page]:before:-left-3.5 aria-[current=page]:before:w-[3px] aria-[current=page]:before:rounded-r-[3px] aria-[current=page]:before:bg-[#4f46e5]" href="#" aria-current="page"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-grid"/></svg><span>Dashboard</span></a></li>
      <li><a class="group relative flex items-center rounded-lg font-medium text-[#475569] no-underline transition-colors duration-150 hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] motion-reduce:transition-none gap-[11px] px-3 py-2 hover:bg-[#f1f5f9] aria-[current=page]:bg-[#eef2ff] aria-[current=page]:text-[#4338ca] aria-[current=page]:font-semibold aria-[current=page]:before:absolute aria-[current=page]:before:inset-y-2 aria-[current=page]:before:-left-3.5 aria-[current=page]:before:w-[3px] aria-[current=page]:before:rounded-r-[3px] aria-[current=page]:before:bg-[#4f46e5]" href="#"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-cart"/></svg><span>Orders</span><span class="ml-auto min-w-[22px] rounded-full px-[7px] py-px text-center text-[.72rem] font-semibold bg-[#e9edf3] text-[#334155]">12<span class="sr-only"> new</span></span></a></li>
      <li><a class="group relative flex items-center rounded-lg font-medium text-[#475569] no-underline transition-colors duration-150 hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] motion-reduce:transition-none gap-[11px] px-3 py-2 hover:bg-[#f1f5f9] aria-[current=page]:bg-[#eef2ff] aria-[current=page]:text-[#4338ca] aria-[current=page]:font-semibold aria-[current=page]:before:absolute aria-[current=page]:before:inset-y-2 aria-[current=page]:before:-left-3.5 aria-[current=page]:before:w-[3px] aria-[current=page]:before:rounded-r-[3px] aria-[current=page]:before:bg-[#4f46e5]" href="#"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-users"/></svg><span>Customers</span></a></li>
      <li><a class="group relative flex items-center rounded-lg font-medium text-[#475569] no-underline transition-colors duration-150 hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] motion-reduce:transition-none gap-[11px] px-3 py-2 hover:bg-[#f1f5f9] aria-[current=page]:bg-[#eef2ff] aria-[current=page]:text-[#4338ca] aria-[current=page]:font-semibold aria-[current=page]:before:absolute aria-[current=page]:before:inset-y-2 aria-[current=page]:before:-left-3.5 aria-[current=page]:before:w-[3px] aria-[current=page]:before:rounded-r-[3px] aria-[current=page]:before:bg-[#4f46e5]" href="#"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-box"/></svg><span>Products</span></a></li>
      <li><a class="group relative flex items-center rounded-lg font-medium text-[#475569] no-underline transition-colors duration-150 hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] motion-reduce:transition-none gap-[11px] px-3 py-2 hover:bg-[#f1f5f9] aria-[current=page]:bg-[#eef2ff] aria-[current=page]:text-[#4338ca] aria-[current=page]:font-semibold aria-[current=page]:before:absolute aria-[current=page]:before:inset-y-2 aria-[current=page]:before:-left-3.5 aria-[current=page]:before:w-[3px] aria-[current=page]:before:rounded-r-[3px] aria-[current=page]:before:bg-[#4f46e5]" href="#"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-tag"/></svg><span>Discounts</span></a></li>
    </ul>
    <p class="mt-4 mb-1.5 px-3 text-[.6875rem] font-bold tracking-[.08em] text-[#5b6474] uppercase">Reports</p>
    <ul class="m-0 flex list-none flex-col gap-0.5 p-0">
      <li><a class="group relative flex items-center rounded-lg font-medium text-[#475569] no-underline transition-colors duration-150 hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] motion-reduce:transition-none gap-[11px] px-3 py-2 hover:bg-[#f1f5f9] aria-[current=page]:bg-[#eef2ff] aria-[current=page]:text-[#4338ca] aria-[current=page]:font-semibold aria-[current=page]:before:absolute aria-[current=page]:before:inset-y-2 aria-[current=page]:before:-left-3.5 aria-[current=page]:before:w-[3px] aria-[current=page]:before:rounded-r-[3px] aria-[current=page]:before:bg-[#4f46e5]" href="#"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-chart"/></svg><span>Analytics</span></a></li>
      <li><a class="group relative flex items-center rounded-lg font-medium text-[#475569] no-underline transition-colors duration-150 hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] motion-reduce:transition-none gap-[11px] px-3 py-2 hover:bg-[#f1f5f9] aria-[current=page]:bg-[#eef2ff] aria-[current=page]:text-[#4338ca] aria-[current=page]:font-semibold aria-[current=page]:before:absolute aria-[current=page]:before:inset-y-2 aria-[current=page]:before:-left-3.5 aria-[current=page]:before:w-[3px] aria-[current=page]:before:rounded-r-[3px] aria-[current=page]:before:bg-[#4f46e5]" href="#"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-trend"/></svg><span>Revenue</span></a></li>
    </ul>
    <ul class="m-0 mt-auto flex list-none flex-col gap-0.5 p-0 border-t border-[#e5e9f0] pt-3">
      <li><a class="group relative flex items-center rounded-lg font-medium text-[#475569] no-underline transition-colors duration-150 hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] motion-reduce:transition-none gap-[11px] px-3 py-2 hover:bg-[#f1f5f9] aria-[current=page]:bg-[#eef2ff] aria-[current=page]:text-[#4338ca] aria-[current=page]:font-semibold aria-[current=page]:before:absolute aria-[current=page]:before:inset-y-2 aria-[current=page]:before:-left-3.5 aria-[current=page]:before:w-[3px] aria-[current=page]:before:rounded-r-[3px] aria-[current=page]:before:bg-[#4f46e5]" href="#"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-sliders"/></svg><span>Settings</span></a></li>
      <li><a class="group relative flex items-center rounded-lg font-medium text-[#475569] no-underline transition-colors duration-150 hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] motion-reduce:transition-none gap-[11px] px-3 py-2 hover:bg-[#f1f5f9] aria-[current=page]:bg-[#eef2ff] aria-[current=page]:text-[#4338ca] aria-[current=page]:font-semibold aria-[current=page]:before:absolute aria-[current=page]:before:inset-y-2 aria-[current=page]:before:-left-3.5 aria-[current=page]:before:w-[3px] aria-[current=page]:before:rounded-r-[3px] aria-[current=page]:before:bg-[#4f46e5]" href="#"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-help"/></svg><span>Help centre</span></a></li>
    </ul>
  </nav>
  <div class="flex min-w-0 flex-1 flex-col gap-[18px] overflow-hidden bg-[#f8fafc] px-7 py-[26px] max-[640px]:px-[18px] max-[640px]:py-5">
    <div class="flex flex-wrap items-end justify-between gap-3"><div><p class="m-0 text-[.75rem] text-[#5b6474]">Northwind store · Tuesday 14 October</p><h2 class="mt-0.5 mb-0 text-[1.25rem] leading-[1.3] font-bold tracking-[-.02em] text-[#0f172a]">Dashboard</h2></div><span class="rounded-full border px-3 py-[5px] text-[.75rem] font-semibold border-[#d9dfe8] bg-white text-[#334155]">Last 7 days</span></div>
    <div class="grid grid-cols-[repeat(auto-fit,minmax(128px,1fr))] gap-3"><div class="rounded-xl border border-[#e2e8f0] bg-white px-[15px] py-[13px]"><span class="block text-[.75rem] text-[#5b6474]">Revenue</span><b class="mt-[3px] block text-[1.2rem] leading-[1.3] tracking-[-.01em] text-[#0f172a]">$48,210</b><em class="text-[.72rem] font-semibold not-italic text-[#047857]">+12.4%</em></div><div class="rounded-xl border border-[#e2e8f0] bg-white px-[15px] py-[13px]"><span class="block text-[.75rem] text-[#5b6474]">Orders</span><b class="mt-[3px] block text-[1.2rem] leading-[1.3] tracking-[-.01em] text-[#0f172a]">1,284</b><em class="text-[.72rem] font-semibold not-italic text-[#047857]">+8.1%</em></div><div class="rounded-xl border border-[#e2e8f0] bg-white px-[15px] py-[13px]"><span class="block text-[.75rem] text-[#5b6474]">Returning customers</span><b class="mt-[3px] block text-[1.2rem] leading-[1.3] tracking-[-.01em] text-[#0f172a]">38%</b><em class="text-[.72rem] font-semibold not-italic text-[#047857]">+2.6 pts</em></div></div>
    <div class="flex min-h-[110px] flex-1 items-end gap-2 rounded-xl border border-[#e2e8f0] bg-white px-4 pt-4 max-[640px]:h-[90px] max-[640px]:min-h-0 max-[640px]:flex-none" aria-hidden="true"><i class="flex-1 rounded-t-[5px] bg-[#c7d2fe] opacity-70" style="height:38%"></i><i class="flex-1 rounded-t-[5px] bg-[#c7d2fe]" style="height:52%"></i><i class="flex-1 rounded-t-[5px] bg-[#c7d2fe] opacity-70" style="height:44%"></i><i class="flex-1 rounded-t-[5px] bg-[#c7d2fe]" style="height:70%"></i><i class="flex-1 rounded-t-[5px] bg-[#c7d2fe] opacity-70" style="height:58%"></i><i class="flex-1 rounded-t-[5px] bg-[#c7d2fe]" style="height:82%"></i><i class="flex-1 rounded-t-[5px] bg-[#c7d2fe] opacity-70" style="height:64%"></i><i class="flex-1 rounded-t-[5px] bg-[#c7d2fe]" style="height:90%"></i><i class="flex-1 rounded-t-[5px] bg-[#c7d2fe] opacity-70" style="height:72%"></i><i class="flex-1 rounded-t-[5px] bg-[#c7d2fe]" style="height:60%"></i><i class="flex-1 rounded-t-[5px] bg-[#c7d2fe] opacity-70" style="height:78%"></i><i class="flex-1 rounded-t-[5px] bg-[#c7d2fe]" style="height:94%"></i></div>
  </div>
</div></div>
<div><span class="mb-3.5 block text-[.72rem] tracking-[.12em] text-[#5b6474] uppercase">Filled pill with counts and project colours</span>
<div class="flex h-[520px] overflow-hidden rounded-2xl border border-[#d6dce5] bg-white shadow-[0_1px_2px_rgba(15,23,42,.05),0_18px_40px_-22px_rgba(15,23,42,.28)] max-[640px]:h-auto max-[640px]:flex-col">
  <nav class="flex flex-none flex-col overflow-y-auto border-r border-[#e5e9f0] basis-[240px] bg-[#f5f6f9] px-3.5 py-[18px] text-[.875rem] max-[640px]:basis-auto max-[640px]:border-r-0 max-[640px]:border-b" aria-label="Fieldwork">
    <a class="flex items-center gap-2.5 rounded-lg px-2.5 pt-0.5 pb-3 text-[1rem] font-bold tracking-[-.01em] text-[#0f172a] no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5]" href="#"><span class="grid size-[30px] place-items-center rounded-[9px] bg-[#4f46e5] text-[.85rem] font-extrabold text-white" aria-hidden="true">F</span>Fieldwork</a>
    <button class="mb-1.5 flex cursor-pointer items-center justify-center gap-2 rounded-lg border border-[#cfd5df] bg-white px-3 py-2 font-semibold text-[#0f172a] transition-colors duration-150 hover:border-[#a3acba] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] motion-reduce:transition-none" type="button"><svg class="size-4" aria-hidden="true"><use href="#i-plus"/></svg>New task</button>
    <ul class="m-0 flex list-none flex-col gap-0.5 p-0">
      <li><a class="group relative flex items-center rounded-lg font-medium text-[#475569] no-underline transition-colors duration-150 hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] motion-reduce:transition-none gap-[11px] px-3 py-2 hover:bg-[#e8ebf1] aria-[current=page]:bg-[#4f46e5] aria-[current=page]:text-white aria-[current=page]:font-semibold aria-[current=page]:shadow-[0_6px_14px_-6px_rgba(79,70,229,.7)]" href="#" aria-current="page"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-home"/></svg><span>Home</span></a></li>
      <li><a class="group relative flex items-center rounded-lg font-medium text-[#475569] no-underline transition-colors duration-150 hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] motion-reduce:transition-none gap-[11px] px-3 py-2 hover:bg-[#e8ebf1] aria-[current=page]:bg-[#4f46e5] aria-[current=page]:text-white aria-[current=page]:font-semibold aria-[current=page]:shadow-[0_6px_14px_-6px_rgba(79,70,229,.7)]" href="#"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-tasks"/></svg><span>My tasks</span><span class="ml-auto min-w-[22px] rounded-full px-[7px] py-px text-center text-[.72rem] font-semibold bg-[#e9edf3] text-[#334155] group-aria-[current=page]:bg-white group-aria-[current=page]:text-[#4338ca]">8<span class="sr-only"> open</span></span></a></li>
      <li><a class="group relative flex items-center rounded-lg font-medium text-[#475569] no-underline transition-colors duration-150 hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] motion-reduce:transition-none gap-[11px] px-3 py-2 hover:bg-[#e8ebf1] aria-[current=page]:bg-[#4f46e5] aria-[current=page]:text-white aria-[current=page]:font-semibold aria-[current=page]:shadow-[0_6px_14px_-6px_rgba(79,70,229,.7)]" href="#"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-inbox"/></svg><span>Inbox</span><span class="ml-auto min-w-[22px] rounded-full px-[7px] py-px text-center text-[.72rem] font-semibold bg-[#e9edf3] text-[#334155] group-aria-[current=page]:bg-white group-aria-[current=page]:text-[#4338ca]">3<span class="sr-only"> unread</span></span></a></li>
      <li><a class="group relative flex items-center rounded-lg font-medium text-[#475569] no-underline transition-colors duration-150 hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] motion-reduce:transition-none gap-[11px] px-3 py-2 hover:bg-[#e8ebf1] aria-[current=page]:bg-[#4f46e5] aria-[current=page]:text-white aria-[current=page]:font-semibold aria-[current=page]:shadow-[0_6px_14px_-6px_rgba(79,70,229,.7)]" href="#"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-calendar"/></svg><span>Calendar</span></a></li>
    </ul>
    <p class="mt-4 mb-1.5 px-3 text-[.6875rem] font-bold tracking-[.08em] text-[#5b6474] uppercase">Projects</p>
    <ul class="m-0 flex list-none flex-col gap-0.5 p-0">
      <li><a class="group relative flex items-center rounded-lg font-medium text-[#475569] no-underline transition-colors duration-150 hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] motion-reduce:transition-none gap-[11px] px-3 py-2 hover:bg-[#e8ebf1] aria-[current=page]:bg-[#4f46e5] aria-[current=page]:text-white aria-[current=page]:font-semibold aria-[current=page]:shadow-[0_6px_14px_-6px_rgba(79,70,229,.7)]" href="#"><span class="mx-1 size-2.5 flex-none rounded-[3px]" style="background:#6366f1"></span><span>Website relaunch</span></a></li>
      <li><a class="group relative flex items-center rounded-lg font-medium text-[#475569] no-underline transition-colors duration-150 hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] motion-reduce:transition-none gap-[11px] px-3 py-2 hover:bg-[#e8ebf1] aria-[current=page]:bg-[#4f46e5] aria-[current=page]:text-white aria-[current=page]:font-semibold aria-[current=page]:shadow-[0_6px_14px_-6px_rgba(79,70,229,.7)]" href="#"><span class="mx-1 size-2.5 flex-none rounded-[3px]" style="background:#f59e0b"></span><span>Q4 campaign</span></a></li>
      <li><a class="group relative flex items-center rounded-lg font-medium text-[#475569] no-underline transition-colors duration-150 hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] motion-reduce:transition-none gap-[11px] px-3 py-2 hover:bg-[#e8ebf1] aria-[current=page]:bg-[#4f46e5] aria-[current=page]:text-white aria-[current=page]:font-semibold aria-[current=page]:shadow-[0_6px_14px_-6px_rgba(79,70,229,.7)]" href="#"><span class="mx-1 size-2.5 flex-none rounded-[3px]" style="background:#10b981"></span><span>Mobile app 2.0</span></a></li>
    </ul>
    <ul class="m-0 mt-auto flex list-none flex-col gap-0.5 p-0 border-t border-[#e5e9f0] pt-3">
      <li><a class="group relative flex items-center rounded-lg font-medium text-[#475569] no-underline transition-colors duration-150 hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] motion-reduce:transition-none gap-[11px] px-3 py-2 hover:bg-[#e8ebf1] aria-[current=page]:bg-[#4f46e5] aria-[current=page]:text-white aria-[current=page]:font-semibold aria-[current=page]:shadow-[0_6px_14px_-6px_rgba(79,70,229,.7)]" href="#"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-sliders"/></svg><span>Settings</span></a></li>
    </ul>
  </nav>
  <div class="flex min-w-0 flex-1 flex-col gap-[18px] overflow-hidden bg-[#f8fafc] px-7 py-[26px] max-[640px]:px-[18px] max-[640px]:py-5">
    <div class="flex flex-wrap items-end justify-between gap-3"><div><p class="m-0 text-[.75rem] text-[#5b6474]">Fieldwork · Week 42</p><h2 class="mt-0.5 mb-0 text-[1.25rem] leading-[1.3] font-bold tracking-[-.02em] text-[#0f172a]">Good morning, Maya</h2></div><span class="rounded-full border px-3 py-[5px] text-[.75rem] font-semibold border-[#d9dfe8] bg-white text-[#334155]">5 due today</span></div>
    <div class="grid grid-cols-[repeat(auto-fit,minmax(128px,1fr))] gap-3"><div class="rounded-xl border border-[#e2e8f0] bg-white px-[15px] py-[13px]"><span class="block text-[.75rem] text-[#5b6474]">Due today</span><b class="mt-[3px] block text-[1.2rem] leading-[1.3] tracking-[-.01em] text-[#0f172a]">5</b></div><div class="rounded-xl border border-[#e2e8f0] bg-white px-[15px] py-[13px]"><span class="block text-[.75rem] text-[#5b6474]">Completed this week</span><b class="mt-[3px] block text-[1.2rem] leading-[1.3] tracking-[-.01em] text-[#0f172a]">23</b><em class="text-[.72rem] font-semibold not-italic text-[#047857]">+6 on last week</em></div><div class="rounded-xl border border-[#e2e8f0] bg-white px-[15px] py-[13px]"><span class="block text-[.75rem] text-[#5b6474]">Overdue</span><b class="mt-[3px] block text-[1.2rem] leading-[1.3] tracking-[-.01em] text-[#0f172a]">2</b></div></div>
    <div class="flex min-h-[110px] flex-1 items-end gap-2 rounded-xl border border-[#e2e8f0] bg-white px-4 pt-4 max-[640px]:h-[90px] max-[640px]:min-h-0 max-[640px]:flex-none" aria-hidden="true"><i class="flex-1 rounded-t-[5px] bg-[#a5b4fc] opacity-70" style="height:30%"></i><i class="flex-1 rounded-t-[5px] bg-[#a5b4fc]" style="height:45%"></i><i class="flex-1 rounded-t-[5px] bg-[#a5b4fc] opacity-70" style="height:62%"></i><i class="flex-1 rounded-t-[5px] bg-[#a5b4fc]" style="height:40%"></i><i class="flex-1 rounded-t-[5px] bg-[#a5b4fc] opacity-70" style="height:75%"></i><i class="flex-1 rounded-t-[5px] bg-[#a5b4fc]" style="height:55%"></i><i class="flex-1 rounded-t-[5px] bg-[#a5b4fc] opacity-70" style="height:68%"></i><i class="flex-1 rounded-t-[5px] bg-[#a5b4fc]" style="height:84%"></i><i class="flex-1 rounded-t-[5px] bg-[#a5b4fc] opacity-70" style="height:50%"></i><i class="flex-1 rounded-t-[5px] bg-[#a5b4fc]" style="height:66%"></i><i class="flex-1 rounded-t-[5px] bg-[#a5b4fc] opacity-70" style="height:72%"></i><i class="flex-1 rounded-t-[5px] bg-[#a5b4fc]" style="height:58%"></i></div>
  </div>
</div></div>
<div><span class="mb-3.5 block text-[.72rem] tracking-[.12em] text-[#5b6474] uppercase">Compact with dividers and a dot marker</span>
<div class="flex h-[520px] overflow-hidden rounded-2xl border border-[#d6dce5] bg-white shadow-[0_1px_2px_rgba(15,23,42,.05),0_18px_40px_-22px_rgba(15,23,42,.28)] max-[640px]:h-auto max-[640px]:flex-col">
  <nav class="flex flex-none flex-col overflow-y-auto border-r border-[#e5e9f0] basis-[216px] bg-white px-2.5 py-3.5 text-[.8125rem] max-[640px]:basis-auto max-[640px]:border-r-0 max-[640px]:border-b" aria-label="Ledger">
    <a class="flex items-center gap-2.5 rounded-lg px-2.5 pt-0.5 pb-3 text-[1rem] font-bold tracking-[-.01em] text-[#0f172a] no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5]" href="#"><span class="grid size-[30px] place-items-center rounded-[9px] bg-[#4f46e5] text-[.85rem] font-extrabold text-white" aria-hidden="true">L</span>Ledger</a>
    <ul class="m-0 flex list-none flex-col gap-0.5 p-0">
      <li><a class="group relative flex items-center rounded-lg font-medium text-[#475569] no-underline transition-colors duration-150 hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] motion-reduce:transition-none gap-[9px] px-2.5 py-1.5 hover:bg-[#f1f5f9] aria-[current=page]:text-[#0f172a] aria-[current=page]:font-[650] aria-[current=page]:before:absolute aria-[current=page]:before:top-1/2 aria-[current=page]:before:right-2.5 aria-[current=page]:before:-mt-[3px] aria-[current=page]:before:size-1.5 aria-[current=page]:before:rounded-full aria-[current=page]:before:bg-[#4f46e5]" href="#" aria-current="page"><svg class="size-4 flex-none" aria-hidden="true"><use href="#i-grid"/></svg><span>Overview</span></a></li>
      <li><a class="group relative flex items-center rounded-lg font-medium text-[#475569] no-underline transition-colors duration-150 hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] motion-reduce:transition-none gap-[9px] px-2.5 py-1.5 hover:bg-[#f1f5f9] aria-[current=page]:text-[#0f172a] aria-[current=page]:font-[650] aria-[current=page]:before:absolute aria-[current=page]:before:top-1/2 aria-[current=page]:before:right-2.5 aria-[current=page]:before:-mt-[3px] aria-[current=page]:before:size-1.5 aria-[current=page]:before:rounded-full aria-[current=page]:before:bg-[#4f46e5]" href="#"><svg class="size-4 flex-none" aria-hidden="true"><use href="#i-receipt"/></svg><span>Transactions</span></a></li>
      <li><a class="group relative flex items-center rounded-lg font-medium text-[#475569] no-underline transition-colors duration-150 hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] motion-reduce:transition-none gap-[9px] px-2.5 py-1.5 hover:bg-[#f1f5f9] aria-[current=page]:text-[#0f172a] aria-[current=page]:font-[650] aria-[current=page]:before:absolute aria-[current=page]:before:top-1/2 aria-[current=page]:before:right-2.5 aria-[current=page]:before:-mt-[3px] aria-[current=page]:before:size-1.5 aria-[current=page]:before:rounded-full aria-[current=page]:before:bg-[#4f46e5]" href="#"><svg class="size-4 flex-none" aria-hidden="true"><use href="#i-file"/></svg><span>Invoices</span><span class="ml-auto text-[.72rem] text-[#5b6474] tabular-nums">4 due</span></a></li>
      <li><a class="group relative flex items-center rounded-lg font-medium text-[#475569] no-underline transition-colors duration-150 hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] motion-reduce:transition-none gap-[9px] px-2.5 py-1.5 hover:bg-[#f1f5f9] aria-[current=page]:text-[#0f172a] aria-[current=page]:font-[650] aria-[current=page]:before:absolute aria-[current=page]:before:top-1/2 aria-[current=page]:before:right-2.5 aria-[current=page]:before:-mt-[3px] aria-[current=page]:before:size-1.5 aria-[current=page]:before:rounded-full aria-[current=page]:before:bg-[#4f46e5]" href="#"><svg class="size-4 flex-none" aria-hidden="true"><use href="#i-card"/></svg><span>Cards</span></a></li>
      <li><a class="group relative flex items-center rounded-lg font-medium text-[#475569] no-underline transition-colors duration-150 hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] motion-reduce:transition-none gap-[9px] px-2.5 py-1.5 hover:bg-[#f1f5f9] aria-[current=page]:text-[#0f172a] aria-[current=page]:font-[650] aria-[current=page]:before:absolute aria-[current=page]:before:top-1/2 aria-[current=page]:before:right-2.5 aria-[current=page]:before:-mt-[3px] aria-[current=page]:before:size-1.5 aria-[current=page]:before:rounded-full aria-[current=page]:before:bg-[#4f46e5]" href="#"><svg class="size-4 flex-none" aria-hidden="true"><use href="#i-send"/></svg><span>Payees</span></a></li>
    </ul>
    <p class="mt-3 mb-1 border-t border-[#e5e9f0] px-2.5 pt-3 text-[.6875rem] font-bold tracking-[.08em] text-[#5b6474] uppercase">Accounts</p>
    <ul class="m-0 flex list-none flex-col gap-0.5 p-0">
      <li><a class="group relative flex items-center rounded-lg font-medium text-[#475569] no-underline transition-colors duration-150 hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] motion-reduce:transition-none gap-[9px] px-2.5 py-1.5 hover:bg-[#f1f5f9] aria-[current=page]:text-[#0f172a] aria-[current=page]:font-[650] aria-[current=page]:before:absolute aria-[current=page]:before:top-1/2 aria-[current=page]:before:right-2.5 aria-[current=page]:before:-mt-[3px] aria-[current=page]:before:size-1.5 aria-[current=page]:before:rounded-full aria-[current=page]:before:bg-[#4f46e5]" href="#"><svg class="size-4 flex-none" aria-hidden="true"><use href="#i-wallet"/></svg><span>Operating</span><span class="ml-auto text-[.72rem] text-[#5b6474] tabular-nums">$84,120</span></a></li>
      <li><a class="group relative flex items-center rounded-lg font-medium text-[#475569] no-underline transition-colors duration-150 hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] motion-reduce:transition-none gap-[9px] px-2.5 py-1.5 hover:bg-[#f1f5f9] aria-[current=page]:text-[#0f172a] aria-[current=page]:font-[650] aria-[current=page]:before:absolute aria-[current=page]:before:top-1/2 aria-[current=page]:before:right-2.5 aria-[current=page]:before:-mt-[3px] aria-[current=page]:before:size-1.5 aria-[current=page]:before:rounded-full aria-[current=page]:before:bg-[#4f46e5]" href="#"><svg class="size-4 flex-none" aria-hidden="true"><use href="#i-wallet"/></svg><span>Payroll</span><span class="ml-auto text-[.72rem] text-[#5b6474] tabular-nums">$31,480</span></a></li>
      <li><a class="group relative flex items-center rounded-lg font-medium text-[#475569] no-underline transition-colors duration-150 hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] motion-reduce:transition-none gap-[9px] px-2.5 py-1.5 hover:bg-[#f1f5f9] aria-[current=page]:text-[#0f172a] aria-[current=page]:font-[650] aria-[current=page]:before:absolute aria-[current=page]:before:top-1/2 aria-[current=page]:before:right-2.5 aria-[current=page]:before:-mt-[3px] aria-[current=page]:before:size-1.5 aria-[current=page]:before:rounded-full aria-[current=page]:before:bg-[#4f46e5]" href="#"><svg class="size-4 flex-none" aria-hidden="true"><use href="#i-wallet"/></svg><span>Tax reserve</span><span class="ml-auto text-[.72rem] text-[#5b6474] tabular-nums">$12,900</span></a></li>
    </ul>
    <ul class="m-0 mt-auto flex list-none flex-col gap-0.5 p-0 pt-3">
      <li><a class="group relative flex items-center rounded-lg font-medium text-[#475569] no-underline transition-colors duration-150 hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] motion-reduce:transition-none gap-[9px] px-2.5 py-1.5 hover:bg-[#f1f5f9] aria-[current=page]:text-[#0f172a] aria-[current=page]:font-[650] aria-[current=page]:before:absolute aria-[current=page]:before:top-1/2 aria-[current=page]:before:right-2.5 aria-[current=page]:before:-mt-[3px] aria-[current=page]:before:size-1.5 aria-[current=page]:before:rounded-full aria-[current=page]:before:bg-[#4f46e5]" href="#"><svg class="size-4 flex-none" aria-hidden="true"><use href="#i-sliders"/></svg><span>Settings</span></a></li>
    </ul>
  </nav>
  <div class="flex min-w-0 flex-1 flex-col gap-[18px] overflow-hidden bg-[#f8fafc] px-7 py-[26px] max-[640px]:px-[18px] max-[640px]:py-5">
    <div class="flex flex-wrap items-end justify-between gap-3"><div><p class="m-0 text-[.75rem] text-[#5b6474]">Ledger · All accounts</p><h2 class="mt-0.5 mb-0 text-[1.25rem] leading-[1.3] font-bold tracking-[-.02em] text-[#0f172a]">Overview</h2></div><span class="rounded-full border px-3 py-[5px] text-[.75rem] font-semibold border-[#d9dfe8] bg-white text-[#334155]">October 2026</span></div>
    <div class="grid grid-cols-[repeat(auto-fit,minmax(128px,1fr))] gap-3"><div class="rounded-xl border border-[#e2e8f0] bg-white px-[15px] py-[13px]"><span class="block text-[.75rem] text-[#5b6474]">Cash on hand</span><b class="mt-[3px] block text-[1.2rem] leading-[1.3] tracking-[-.01em] text-[#0f172a]">$128,500</b></div><div class="rounded-xl border border-[#e2e8f0] bg-white px-[15px] py-[13px]"><span class="block text-[.75rem] text-[#5b6474]">Money in</span><b class="mt-[3px] block text-[1.2rem] leading-[1.3] tracking-[-.01em] text-[#0f172a]">$64,210</b><em class="text-[.72rem] font-semibold not-italic text-[#047857]">+4.2%</em></div><div class="rounded-xl border border-[#e2e8f0] bg-white px-[15px] py-[13px]"><span class="block text-[.75rem] text-[#5b6474]">Money out</span><b class="mt-[3px] block text-[1.2rem] leading-[1.3] tracking-[-.01em] text-[#0f172a]">$41,380</b></div></div>
    <div class="flex min-h-[110px] flex-1 items-end gap-2 rounded-xl border border-[#e2e8f0] bg-white px-4 pt-4 max-[640px]:h-[90px] max-[640px]:min-h-0 max-[640px]:flex-none" aria-hidden="true"><i class="flex-1 rounded-t-[5px] bg-[#a7f3d0] opacity-70" style="height:60%"></i><i class="flex-1 rounded-t-[5px] bg-[#a7f3d0]" style="height:48%"></i><i class="flex-1 rounded-t-[5px] bg-[#a7f3d0] opacity-70" style="height:72%"></i><i class="flex-1 rounded-t-[5px] bg-[#a7f3d0]" style="height:66%"></i><i class="flex-1 rounded-t-[5px] bg-[#a7f3d0] opacity-70" style="height:54%"></i><i class="flex-1 rounded-t-[5px] bg-[#a7f3d0]" style="height:80%"></i><i class="flex-1 rounded-t-[5px] bg-[#a7f3d0] opacity-70" style="height:62%"></i><i class="flex-1 rounded-t-[5px] bg-[#a7f3d0]" style="height:70%"></i><i class="flex-1 rounded-t-[5px] bg-[#a7f3d0] opacity-70" style="height:58%"></i><i class="flex-1 rounded-t-[5px] bg-[#a7f3d0]" style="height:86%"></i><i class="flex-1 rounded-t-[5px] bg-[#a7f3d0] opacity-70" style="height:74%"></i><i class="flex-1 rounded-t-[5px] bg-[#a7f3d0]" style="height:68%"></i></div>
  </div>
</div></div>

About this set

Three versions of the sidebar most dashboards start from, each shown in a small app frame. Sections with an accent bar is a store admin with Store and Reports headings, an order count and a 3px bar beside the current page. Filled pill is a project tool on a tinted rail, with a New task button, a solid indigo pill for the current page, counts for tasks and inbox, and colour squares for projects. Compact is a finance sidebar with 13px type, hairline dividers between groups, a small dot for the current page and right-aligned account balances. Use the first as a default, the pill where the current page should be obvious at a glance, and the compact one when the list is long. Each sidebar is a nav element with an aria-label, holding plain lists of links. The current link carries aria-current=”page”, and that attribute is what the CSS styles, so the visual state and the announced state cannot drift apart. The sidebar is a flex column, so the Settings group is pushed to the bottom with margin-top:auto. Under 640px the frame stacks the sidebar above the content.

What’s included

  • Three layouts: accent bar, filled pill, compact with dividers
  • Current page styled from aria-current="page"
  • Counts include visually hidden words such as "12 new"
  • Footer group pinned to the bottom with margin-top:auto
  • Bootstrap .nav-pills restyled through its own --bs-nav-* variables

Accessibility

Each sidebar is a nav landmark with its own aria-label, and the current link has aria-current="page". Count badges read as "Orders 12 new" because the extra word is visually hidden, not missing. Every link and button shows a 2px indigo outline on keyboard focus, and the hover transitions switch off under prefers-reduced-motion.

Customise it

In plain CSS change the --sb-* custom properties on .sb (accent, active background, ink, hover, line) and the 248px flex-basis for width. In Bootstrap the colours are the --bs-nav-link-* and --bs-nav-pills-* variables set on .sb .nav; in Tailwind edit the hex values in the aria-[current=page]: and hover: utilities.