26 CSS Accordions — Vertical & Horizontal

Minimal Rail

A thin colored rail on the left highlights the active row — no other decoration.

Pure CSS MIT licensed

Minimal Rail the 7th of 26 designs in the 26 CSS Accordions — Vertical & Horizontal collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.

Live preview

Open in playground

The code

<details class="acc-rail" name="acc-rail" open>
  <summary>Typography</summary>
  <p>One sans family, three weights, two sizes. That's the whole system.</p>
</details>
<details class="acc-rail" name="acc-rail">
  <summary>Spacing</summary>
  <p>Built on an 8-point base with optional 4-point quarter-step for fine control.</p>
</details>
<details class="acc-rail" name="acc-rail">
  <summary>Color</summary>
  <p>Three brand tokens, four neutral steps. Override via CSS custom properties.</p>
</details>

.acc-rail {
  position: relative; padding: 0 0 0 16px; margin-bottom: 4px;
}
.acc-rail::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 2px; background: rgba(240,238,255,0.06); border-radius: 2px;
  transition: background .25s;
}
.acc-rail summary {
  cursor: pointer; list-style: none; padding: 11px 0;
  font: 600 13px/1.3 system-ui, sans-serif; color: rgba(240,238,255,0.6);
  transition: color .2s;
}
.acc-rail summary::-webkit-details-marker { display: none; }
.acc-rail[open]::before { background: linear-gradient(180deg, #9c7bd6, #d49a5c); }
.acc-rail[open] > summary { color: #f0eeff; }
.acc-rail p {
  margin: 0 0 12px; padding: 0;
  font: 12px/1.6 system-ui, sans-serif; color: rgba(240,238,255,0.5);
}

More from 26 CSS Accordions — Vertical & Horizontal

Circular Arc Marquee Header Code Comment Paper Folded Equalizer Stacked Cards Holographic Slot Aurora Drift Underline Reveal Numbered Steps Plus / Minus Morph Chevron Rotate

View the full collection →