26 CSS Accordions — Vertical & Horizontal 07 / 26
Minimal Rail
A thin colored rail on the left highlights the active row — no other decoration.
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>
<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);
} .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 ArcMarquee HeaderCode CommentPaper FoldedEqualizerStacked CardsHolographic SlotAurora DriftUnderline RevealNumbered StepsPlus / Minus MorphChevron Rotate
View the full collection →