17 CSS Dashboard Layouts
17 / 17

All 17 in 17 CSS Dashboard Layouts

  1. 01Modern CSS Grid Bento Dashboard
  2. 02Collapsible Sidebar Admin Shell
  3. 03Analytics KPI Card Grid
  4. 04Split-Pane Data & Detail Dashboard
  5. 05Fixed Header & Independent Scroll Panels Layout
  6. 06CSS Grid template-areas Dashboard Template
  7. 07Mobile-Responsive Off-Canvas Drawer Dashboard
  8. 08Container Query Responsive Dashboard Cards
  9. 09E-Commerce Merchant Control Panel
  10. 10Dark Mode Native CSS Variable Dashboard
  11. 11Multi-Level Nested Sidebar Layout
  12. 12Minimalist Vanilla CSS Dashboard Shell (Zero Dependencies)
  13. 13AI Chat / Copilot Split Dashboard
  14. 14Data-Dense Scrollable Grid (Sticky Headers & Columns)
  15. 15Modular Masonry Grid Dashboard
  16. 16Full-Screen Analytics Dashboard (100vh No-Scroll Engine)
  17. 17Horizontal Navigation Top-Bar Dashboard
Pure CSSMIT licensed

Horizontal Navigation Top-Bar Dashboard

The GitHub/Stripe school: no sidebar at all — a global top bar, a tab strip with an animated underline, and content living in a centered min(100% − 48px, 920px) column that breathes at every width. Tabs are radios, so :has() swaps the three settings panes and slides each underline in with zero JS; the tab strip sticks under the bar while the page scrolls. The layout for products whose nav fits in seven words.

Live Demo
Plain CSSTailwind v4
Try it

Mosaic by Cruip: a complete Tailwind admin dashboard template in HTML, React, Next.js and Vue · $69

Cruip · Mosaic by Cruip · Affiliate link

View Mosaic dashboard

The code

<section class="cdl-17" aria-label="Top-bar navigation dashboard demo">
  <div class="cdl-17__page">
    <header class="cdl-17__bar">
      <span class="cdl-17__logo" aria-hidden="true"></span>
      <nav class="cdl-17__crumbs" aria-label="Breadcrumb"><a href="#org">acme-inc</a><i aria-hidden="true">/</i><b>billing</b></nav>
      <span class="cdl-17__search">Jump to… <kbd>/</kbd></span>
      <span class="cdl-17__me" aria-hidden="true">AR</span>
    </header>
    <div class="cdl-17__scroll">
    <div class="cdl-17__tabs" role="group" aria-label="Billing sections">
      <div class="cdl-17__tabrow">
        <label class="cdl-17__tab"><input type="radio" name="cdl17" id="cdl17-t1" checked><span>Overview</span></label>
        <label class="cdl-17__tab"><input type="radio" name="cdl17" id="cdl17-t2"><span>Plans</span></label>
        <label class="cdl-17__tab"><input type="radio" name="cdl17" id="cdl17-t3"><span>Danger zone</span></label>
      </div>
    </div>
      <main class="cdl-17__content">
        <div class="cdl-17__pane cdl-17__pane--1">
          <h1>Billing overview</h1>
          <div class="cdl-17__row">
            <article class="cdl-17__card"><h3>Current plan</h3><p class="cdl-17__big">Team</p><small>$96 / month · renews Aug 12</small><button type="button" class="cdl-17__ghost">Manage</button></article>
            <article class="cdl-17__card"><h3>Usage this cycle</h3><p class="cdl-17__big">64%</p><span class="cdl-17__meter" aria-hidden="true"><i style="--w:64%"></i></span><small>12,800 / 20,000 build minutes</small></article>
          </div>
          <article class="cdl-17__card">
            <h3>Invoices</h3>
            <p class="cdl-17__line"><b>#0091 · July 2026</b><span>$96.00</span><a href="#dl">PDF</a></p>
            <p class="cdl-17__line"><b>#0087 · June 2026</b><span>$96.00</span><a href="#dl">PDF</a></p>
            <p class="cdl-17__line"><b>#0082 · May 2026</b><span>$84.00</span><a href="#dl">PDF</a></p>
          </article>
        </div>
        <div class="cdl-17__pane cdl-17__pane--2">
          <h1>Plans</h1>
          <div class="cdl-17__row cdl-17__row--3">
            <article class="cdl-17__card"><h3>Starter</h3><p class="cdl-17__big">$0</p><small>2 seats · 2k minutes</small><button type="button" class="cdl-17__ghost">Downgrade</button></article>
            <article class="cdl-17__card cdl-17__now"><h3>Team</h3><p class="cdl-17__big">$96</p><small>10 seats · 20k minutes</small><button type="button" class="cdl-17__ghost" aria-pressed="true">Current plan</button></article>
            <article class="cdl-17__card"><h3>Scale</h3><p class="cdl-17__big">$290</p><small>25 seats · 80k minutes</small><button type="button" class="cdl-17__cta">Upgrade</button></article>
          </div>
        </div>
        <div class="cdl-17__pane cdl-17__pane--3">
          <h1>Danger zone</h1>
          <article class="cdl-17__card cdl-17__danger"><h3>Cancel subscription</h3><p class="cdl-17__note">Billing stops at cycle end; data is retained for 90 days.</p><button type="button" class="cdl-17__red">Cancel plan…</button></article>
          <article class="cdl-17__card cdl-17__danger"><h3>Delete organization</h3><p class="cdl-17__note">Permanently removes acme-inc, its repos and audit history.</p><button type="button" class="cdl-17__red">Delete organization…</button></article>
        </div>
      </main>
    </div>
  </div>
</section>
.cdl-17,
.cdl-17 *,
.cdl-17 *::before,
.cdl-17 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.cdl-17 {
  background: var(--bg);
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  --bg: oklch(0.98 0.003 250);
  --panel: oklch(1 0 0);
  --edge: oklch(0.9 0.008 250);
  --ink: oklch(0.24 0.015 250);
  --mut: oklch(0.52 0.015 250);
  --acc: oklch(0.55 0.16 255);
  --red: oklch(0.55 0.19 25);
  font-family: 'Segoe UI',system-ui,sans-serif;
  color: var(--ink);
}

.cdl-17__page {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--edge);
  overflow: hidden;
  background: var(--bg);
}

.cdl-17__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 54px;
  padding: 0 18px;
  background: oklch(0.21 0.02 255);
  color: oklch(0.95 0.005 250);
}

.cdl-17__logo {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: conic-gradient(from 200deg,var(--acc),oklch(0.75 0.12 200));
}

.cdl-17__crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
}

.cdl-17__crumbs a {
  color: oklch(0.8 0.02 250);
  text-decoration: none;
  font-weight: 600;
}

.cdl-17__crumbs a:hover {
  color: oklch(0.98 0 0);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cdl-17__crumbs a:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-radius: 3px;
}

.cdl-17__crumbs i {
  font-style: normal;
  opacity: .45;
}

.cdl-17__crumbs b {
  font-weight: 700;
}

.cdl-17__search {
  margin-left: auto;
  font-size: 12px;
  color: oklch(0.72 0.015 250);
  border: 1px solid oklch(0.35 0.02 255);
  border-radius: 8px;
  padding: 6px 10px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.cdl-17__search kbd {
  font: 600 10px ui-monospace,Menlo,Consolas,monospace;
  border: 1px solid oklch(0.4 0.02 255);
  border-radius: 4px;
  padding: 1px 6px;
}

.cdl-17__me {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10.5px;
  font-weight: 700;
  background: linear-gradient(140deg,var(--acc),oklch(0.6 0.15 300));
}

.cdl-17__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  display: flex;
  flex-direction: column;
}

.cdl-17__tabs {
  position: sticky;
  top: 0;
  z-index: 2;
  background: color-mix(in oklch,var(--bg) 82%,transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--edge);
}

.cdl-17__tabrow {
  width: min(100% - 48px,920px);
  margin-inline: auto;
  display: flex;
  gap: 4px;
}

.cdl-17__tab {
  position: relative;
  cursor: pointer;
}

.cdl-17__tab input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cdl-17__tab span {
  display: block;
  padding: 13px 14px 11px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--mut);
  border-radius: 8px 8px 0 0;
  transition: color .15s,background .15s;
}

.cdl-17__tab:hover span {
  color: var(--ink);
  background: oklch(0.945 0.006 250);
}

.cdl-17__tab:has(:focus-visible) span {
  outline: 2px solid var(--acc);
  outline-offset: -2px;
}

.cdl-17__tab::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -1px;
  height: 2.5px;
  border-radius: 3px;
  background: var(--acc);
  scale: 0 1;
  transition: scale .25s cubic-bezier(.2,.7,.2,1);
}

.cdl-17__tab:has(:checked) span {
  color: var(--ink);
}

.cdl-17__tab:has(:checked)::after {
  scale: 1 1;
}

.cdl-17__content {
  width: min(100% - 48px,920px);
  margin-inline: auto;
  padding: 22px 0 28px;
}

.cdl-17__pane {
  display: none;
  gap: 16px;
}

.cdl-17:has(#cdl17-t1:checked) .cdl-17__pane--1 {
  display: grid;
}

.cdl-17:has(#cdl17-t2:checked) .cdl-17__pane--2 {
  display: grid;
}

.cdl-17:has(#cdl17-t3:checked) .cdl-17__pane--3 {
  display: grid;
}

.cdl-17__pane h1 {
  font-size: 19px;
  letter-spacing: -.01em;
}

.cdl-17__row {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit,minmax(min(240px,100%),1fr));
}

.cdl-17__card {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 13px;
  padding: 17px 19px;
  display: grid;
  gap: 8px;
  align-content: start;
  justify-items: start;
}

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

.cdl-17__big {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}

.cdl-17__card small {
  font-size: 12px;
  color: var(--mut);
}

.cdl-17__now {
  border-color: color-mix(in oklch,var(--acc) 55%,var(--edge));
  box-shadow: 0 0 0 3px color-mix(in oklch,var(--acc) 12%,transparent);
}

.cdl-17__meter {
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: oklch(0.93 0.006 250);
  overflow: hidden;
}

.cdl-17__meter i {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: inherit;
  background: linear-gradient(90deg,var(--acc),oklch(0.68 0.13 210));
}

.cdl-17__line {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  padding: 9px 0;
  border-bottom: 1px solid color-mix(in oklch,var(--edge) 55%,transparent);
}

.cdl-17__line:last-child {
  border-bottom: none;
}

.cdl-17__line b {
  font-weight: 600;
  margin-right: auto;
}

.cdl-17__line span {
  font-variant-numeric: tabular-nums;
  color: var(--mut);
}

.cdl-17__line a {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--acc);
  text-decoration: none;
}

.cdl-17__line a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cdl-17__line a:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-radius: 2px;
}

.cdl-17__ghost,
.cdl-17__cta,
.cdl-17__red {
  font: 600 12.5px 'Segoe UI',system-ui,sans-serif;
  border-radius: 9px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background .15s,border-color .15s;
}

.cdl-17__ghost {
  border: 1px solid var(--edge);
  background: var(--bg);
  color: var(--ink);
}

.cdl-17__ghost:hover {
  border-color: oklch(0.75 0.02 250);
}

.cdl-17__cta {
  border: none;
  background: var(--acc);
  color: oklch(1 0 0);
}

.cdl-17__cta:hover {
  background: color-mix(in oklch,var(--acc) 87%,black);
}

.cdl-17__danger {
  border-color: color-mix(in oklch,var(--red) 35%,var(--edge));
}

.cdl-17__note {
  font-size: 12.5px;
  color: var(--mut);
  line-height: 1.5;
}

.cdl-17__red {
  border: 1px solid color-mix(in oklch,var(--red) 45%,var(--edge));
  background: color-mix(in oklch,var(--red) 7%,white);
  color: var(--red);
}

.cdl-17__red:hover {
  background: color-mix(in oklch,var(--red) 14%,white);
}

.cdl-17__ghost:focus-visible,
.cdl-17__cta:focus-visible,
.cdl-17__red:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .cdl-17 * {
    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: Horizontal Navigation Top-Bar Dashboard
Source: https://codefronts.com/layouts/css-dashboard-layouts/horizontal-navigation-top-bar-dashboard/

The GitHub/Stripe school: no sidebar at all — a global top bar, a tab strip with an animated underline, and content living in a centered min(100% − 48px, 920px) column that breathes at every width. Tabs are radios, so :has() swaps the three settings panes and slides each underline in with zero JS; the tab strip sticks under the bar while the page scrolls. The layout for products whose nav fits in seven words.
## HTML
```html
<section class="cdl-17" aria-label="Top-bar navigation dashboard demo">
  <div class="cdl-17__page">
    <header class="cdl-17__bar">
      <span class="cdl-17__logo" aria-hidden="true"></span>
      <nav class="cdl-17__crumbs" aria-label="Breadcrumb"><a href="#org">acme-inc</a><i aria-hidden="true">/</i><b>billing</b></nav>
      <span class="cdl-17__search">Jump to… <kbd>/</kbd></span>
      <span class="cdl-17__me" aria-hidden="true">AR</span>
    </header>
    <div class="cdl-17__scroll">
    <div class="cdl-17__tabs" role="group" aria-label="Billing sections">
      <div class="cdl-17__tabrow">
        <label class="cdl-17__tab"><input type="radio" name="cdl17" id="cdl17-t1" checked><span>Overview</span></label>
        <label class="cdl-17__tab"><input type="radio" name="cdl17" id="cdl17-t2"><span>Plans</span></label>
        <label class="cdl-17__tab"><input type="radio" name="cdl17" id="cdl17-t3"><span>Danger zone</span></label>
      </div>
    </div>
      <main class="cdl-17__content">
        <div class="cdl-17__pane cdl-17__pane--1">
          <h1>Billing overview</h1>
          <div class="cdl-17__row">
            <article class="cdl-17__card"><h3>Current plan</h3><p class="cdl-17__big">Team</p><small>$96 / month · renews Aug 12</small><button type="button" class="cdl-17__ghost">Manage</button></article>
            <article class="cdl-17__card"><h3>Usage this cycle</h3><p class="cdl-17__big">64%</p><span class="cdl-17__meter" aria-hidden="true"><i style="--w:64%"></i></span><small>12,800 / 20,000 build minutes</small></article>
          </div>
          <article class="cdl-17__card">
            <h3>Invoices</h3>
            <p class="cdl-17__line"><b>#0091 · July 2026</b><span>$96.00</span><a href="#dl">PDF</a></p>
            <p class="cdl-17__line"><b>#0087 · June 2026</b><span>$96.00</span><a href="#dl">PDF</a></p>
            <p class="cdl-17__line"><b>#0082 · May 2026</b><span>$84.00</span><a href="#dl">PDF</a></p>
          </article>
        </div>
        <div class="cdl-17__pane cdl-17__pane--2">
          <h1>Plans</h1>
          <div class="cdl-17__row cdl-17__row--3">
            <article class="cdl-17__card"><h3>Starter</h3><p class="cdl-17__big">$0</p><small>2 seats · 2k minutes</small><button type="button" class="cdl-17__ghost">Downgrade</button></article>
            <article class="cdl-17__card cdl-17__now"><h3>Team</h3><p class="cdl-17__big">$96</p><small>10 seats · 20k minutes</small><button type="button" class="cdl-17__ghost" aria-pressed="true">Current plan</button></article>
            <article class="cdl-17__card"><h3>Scale</h3><p class="cdl-17__big">$290</p><small>25 seats · 80k minutes</small><button type="button" class="cdl-17__cta">Upgrade</button></article>
          </div>
        </div>
        <div class="cdl-17__pane cdl-17__pane--3">
          <h1>Danger zone</h1>
          <article class="cdl-17__card cdl-17__danger"><h3>Cancel subscription</h3><p class="cdl-17__note">Billing stops at cycle end; data is retained for 90 days.</p><button type="button" class="cdl-17__red">Cancel plan…</button></article>
          <article class="cdl-17__card cdl-17__danger"><h3>Delete organization</h3><p class="cdl-17__note">Permanently removes acme-inc, its repos and audit history.</p><button type="button" class="cdl-17__red">Delete organization…</button></article>
        </div>
      </main>
    </div>
  </div>
</section>
```
## CSS
```css
.cdl-17,
.cdl-17 *,
.cdl-17 *::before,
.cdl-17 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.cdl-17 {
  background: var(--bg);
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  --bg: oklch(0.98 0.003 250);
  --panel: oklch(1 0 0);
  --edge: oklch(0.9 0.008 250);
  --ink: oklch(0.24 0.015 250);
  --mut: oklch(0.52 0.015 250);
  --acc: oklch(0.55 0.16 255);
  --red: oklch(0.55 0.19 25);
  font-family: 'Segoe UI',system-ui,sans-serif;
  color: var(--ink);
}

.cdl-17__page {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--edge);
  overflow: hidden;
  background: var(--bg);
}

.cdl-17__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 54px;
  padding: 0 18px;
  background: oklch(0.21 0.02 255);
  color: oklch(0.95 0.005 250);
}

.cdl-17__logo {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: conic-gradient(from 200deg,var(--acc),oklch(0.75 0.12 200));
}

.cdl-17__crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
}

.cdl-17__crumbs a {
  color: oklch(0.8 0.02 250);
  text-decoration: none;
  font-weight: 600;
}

.cdl-17__crumbs a:hover {
  color: oklch(0.98 0 0);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cdl-17__crumbs a:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-radius: 3px;
}

.cdl-17__crumbs i {
  font-style: normal;
  opacity: .45;
}

.cdl-17__crumbs b {
  font-weight: 700;
}

.cdl-17__search {
  margin-left: auto;
  font-size: 12px;
  color: oklch(0.72 0.015 250);
  border: 1px solid oklch(0.35 0.02 255);
  border-radius: 8px;
  padding: 6px 10px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.cdl-17__search kbd {
  font: 600 10px ui-monospace,Menlo,Consolas,monospace;
  border: 1px solid oklch(0.4 0.02 255);
  border-radius: 4px;
  padding: 1px 6px;
}

.cdl-17__me {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10.5px;
  font-weight: 700;
  background: linear-gradient(140deg,var(--acc),oklch(0.6 0.15 300));
}

.cdl-17__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  display: flex;
  flex-direction: column;
}

.cdl-17__tabs {
  position: sticky;
  top: 0;
  z-index: 2;
  background: color-mix(in oklch,var(--bg) 82%,transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--edge);
}

.cdl-17__tabrow {
  width: min(100% - 48px,920px);
  margin-inline: auto;
  display: flex;
  gap: 4px;
}

.cdl-17__tab {
  position: relative;
  cursor: pointer;
}

.cdl-17__tab input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cdl-17__tab span {
  display: block;
  padding: 13px 14px 11px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--mut);
  border-radius: 8px 8px 0 0;
  transition: color .15s,background .15s;
}

.cdl-17__tab:hover span {
  color: var(--ink);
  background: oklch(0.945 0.006 250);
}

.cdl-17__tab:has(:focus-visible) span {
  outline: 2px solid var(--acc);
  outline-offset: -2px;
}

.cdl-17__tab::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -1px;
  height: 2.5px;
  border-radius: 3px;
  background: var(--acc);
  scale: 0 1;
  transition: scale .25s cubic-bezier(.2,.7,.2,1);
}

.cdl-17__tab:has(:checked) span {
  color: var(--ink);
}

.cdl-17__tab:has(:checked)::after {
  scale: 1 1;
}

.cdl-17__content {
  width: min(100% - 48px,920px);
  margin-inline: auto;
  padding: 22px 0 28px;
}

.cdl-17__pane {
  display: none;
  gap: 16px;
}

.cdl-17:has(#cdl17-t1:checked) .cdl-17__pane--1 {
  display: grid;
}

.cdl-17:has(#cdl17-t2:checked) .cdl-17__pane--2 {
  display: grid;
}

.cdl-17:has(#cdl17-t3:checked) .cdl-17__pane--3 {
  display: grid;
}

.cdl-17__pane h1 {
  font-size: 19px;
  letter-spacing: -.01em;
}

.cdl-17__row {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit,minmax(min(240px,100%),1fr));
}

.cdl-17__card {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 13px;
  padding: 17px 19px;
  display: grid;
  gap: 8px;
  align-content: start;
  justify-items: start;
}

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

.cdl-17__big {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}

.cdl-17__card small {
  font-size: 12px;
  color: var(--mut);
}

.cdl-17__now {
  border-color: color-mix(in oklch,var(--acc) 55%,var(--edge));
  box-shadow: 0 0 0 3px color-mix(in oklch,var(--acc) 12%,transparent);
}

.cdl-17__meter {
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: oklch(0.93 0.006 250);
  overflow: hidden;
}

.cdl-17__meter i {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: inherit;
  background: linear-gradient(90deg,var(--acc),oklch(0.68 0.13 210));
}

.cdl-17__line {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  padding: 9px 0;
  border-bottom: 1px solid color-mix(in oklch,var(--edge) 55%,transparent);
}

.cdl-17__line:last-child {
  border-bottom: none;
}

.cdl-17__line b {
  font-weight: 600;
  margin-right: auto;
}

.cdl-17__line span {
  font-variant-numeric: tabular-nums;
  color: var(--mut);
}

.cdl-17__line a {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--acc);
  text-decoration: none;
}

.cdl-17__line a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cdl-17__line a:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-radius: 2px;
}

.cdl-17__ghost,
.cdl-17__cta,
.cdl-17__red {
  font: 600 12.5px 'Segoe UI',system-ui,sans-serif;
  border-radius: 9px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background .15s,border-color .15s;
}

.cdl-17__ghost {
  border: 1px solid var(--edge);
  background: var(--bg);
  color: var(--ink);
}

.cdl-17__ghost:hover {
  border-color: oklch(0.75 0.02 250);
}

.cdl-17__cta {
  border: none;
  background: var(--acc);
  color: oklch(1 0 0);
}

.cdl-17__cta:hover {
  background: color-mix(in oklch,var(--acc) 87%,black);
}

.cdl-17__danger {
  border-color: color-mix(in oklch,var(--red) 35%,var(--edge));
}

.cdl-17__note {
  font-size: 12.5px;
  color: var(--mut);
  line-height: 1.5;
}

.cdl-17__red {
  border: 1px solid color-mix(in oklch,var(--red) 45%,var(--edge));
  background: color-mix(in oklch,var(--red) 7%,white);
  color: var(--red);
}

.cdl-17__red:hover {
  background: color-mix(in oklch,var(--red) 14%,white);
}

.cdl-17__ghost:focus-visible,
.cdl-17__cta:focus-visible,
.cdl-17__red:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

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

How this works

Two moves define the pattern. First, the centered column — the modern container recipe is one line, no wrapper soup:

.content{ width:min(100% - 48px, 920px); margin-inline:auto; }

min() gives you the 920px reading column on desktops AND the 24px side gutters on phones — no media query, no padding wrapper. Second, the sticky layering: the page scrolls as one document (this pattern embraces normal scroll, unlike demo 05), and the tab strip pins below the bar:

.tabs{ position:sticky; top:0; z-index:2;
  background:color-mix(in oklch, var(--bg) 82%, transparent);
  backdrop-filter:blur(8px); }

Tabs are a radio group styled as a strip. Each label owns an ::after underline that scales from 0; the checked state (via :has()) scales it to 1, so switching tabs plays exit and entry underlines in one transition — the poor-designer's shared-element animation:

.tab::after{ content:''; height:2px; background:var(--acc);
  scale:0 1; transition:scale .25s; transform-origin:center; }
.tab:has(:checked)::after{ scale:1 1; }

The same checked state swaps the three panes below (display:none → grid) — settings sections, a plans table, a danger zone — and moves aria-hidden nowhere: hidden panes are display:none, gone from the tree entirely. Real routing would use links; radios keep the demo self-contained and keyboard-correct (arrow keys walk the tabs).

Make it yours

  • Column width: the 920px ceiling; docs-style products often run 760px, data-heavy ones 1100px.
  • Gutter: the 48px (24px per side) inside min() — one token, all breakpoints.
  • Underline → pill indicator: move the accent from ::after to the label background and round it — same state machine, different clothes.
  • Overflowing tab sets: add overflow-x:auto; scrollbar-width:none to the strip — the sticky and indicator logic survive unchanged.

Gotchas — read before shipping

  • position:sticky needs every ancestor between the element and the scroller to keep overflow:visible — wrapping the page in an overflow-x:hidden “fix” is the classic sticky-killer.
  • Radio tabs announce as radios, which is acceptable; a strict tablist wants role=tab/tabpanel + roving tabindex (JS). Either way, NEVER leave inactive panes merely opacity:0 — they stay focusable.
  • backdrop-filter on the sticky strip is progressive: without it (older Firefox) the translucent color-mix background still keeps text legible — test that fallback, not just the pretty path.

Browser support

ChromeSafariFirefoxEdge
111+16.2+121+111+

:has() tab engine needs Firefox 121+. width:min() math and margin-inline are Baseline since 2021. backdrop-filter is universal since Firefox 103; the color-mix fallback covers anything older.

Techniques used in this demo

scrollbar-gutter / -width / -colorMDN ↗conic-gradient()MDN ↗backdrop-filterMDN ↗:has()MDN ↗role="" (ARIA)MDN ↗grid-templateMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →