26 CSS Accordions — Vertical & Horizontal 02 / 26
Numbered Steps
Each row is a numbered step with a circular badge that fills amethyst when expanded.
The code
<details class="acc-step" name="acc-step" open> <summary><span class="acc-step__n">1</span> Install the package</summary> <p>Add the library to your project with one command — no build step required.</p> </details> <details class="acc-step" name="acc-step"> <summary><span class="acc-step__n">2</span> Import a component</summary> <p>Pull in only the components you need. Tree-shakable and zero runtime overhead.</p> </details> <details class="acc-step" name="acc-step"> <summary><span class="acc-step__n">3</span> Customize with tokens</summary> <p>Override CSS custom properties to match your brand colors and spacing scale.</p> </details>
<details class="acc-step" name="acc-step" open>
<summary><span class="acc-step__n">1</span> Install the package</summary>
<p>Add the library to your project with one command — no build step required.</p>
</details>
<details class="acc-step" name="acc-step">
<summary><span class="acc-step__n">2</span> Import a component</summary>
<p>Pull in only the components you need. Tree-shakable and zero runtime overhead.</p>
</details>
<details class="acc-step" name="acc-step">
<summary><span class="acc-step__n">3</span> Customize with tokens</summary>
<p>Override CSS custom properties to match your brand colors and spacing scale.</p>
</details>.acc-step { margin-bottom: 8px; }
.acc-step summary {
display: flex; align-items: center; gap: 12px;
cursor: pointer; list-style: none;
padding: 12px 14px; border-radius: 10px;
background: rgba(156,123,214,0.06);
font: 600 13px/1.3 system-ui, sans-serif; color: rgba(240,238,255,0.75);
transition: background .2s;
}
.acc-step summary::-webkit-details-marker { display: none; }
.acc-step__n {
display: grid; place-items: center;
width: 22px; height: 22px; border-radius: 50%;
border: 1.5px solid rgba(156,123,214,0.5);
font: 700 11px monospace; color: rgba(240,238,255,0.7);
transition: all .25s;
}
.acc-step[open] > summary { background: rgba(156,123,214,0.16); color: #f0eeff; }
.acc-step[open] .acc-step__n { background: #9c7bd6; color: #fff; border-color: #9c7bd6; }
.acc-step p {
margin: 8px 0 0; padding: 0 14px 12px 48px;
font: 12px/1.6 system-ui, sans-serif; color: rgba(240,238,255,0.55);
} .acc-step { margin-bottom: 8px; }
.acc-step summary {
display: flex; align-items: center; gap: 12px;
cursor: pointer; list-style: none;
padding: 12px 14px; border-radius: 10px;
background: rgba(156,123,214,0.06);
font: 600 13px/1.3 system-ui, sans-serif; color: rgba(240,238,255,0.75);
transition: background .2s;
}
.acc-step summary::-webkit-details-marker { display: none; }
.acc-step__n {
display: grid; place-items: center;
width: 22px; height: 22px; border-radius: 50%;
border: 1.5px solid rgba(156,123,214,0.5);
font: 700 11px monospace; color: rgba(240,238,255,0.7);
transition: all .25s;
}
.acc-step[open] > summary { background: rgba(156,123,214,0.16); color: #f0eeff; }
.acc-step[open] .acc-step__n { background: #9c7bd6; color: #fff; border-color: #9c7bd6; }
.acc-step p {
margin: 8px 0 0; padding: 0 14px 12px 48px;
font: 12px/1.6 system-ui, sans-serif; color: rgba(240,238,255,0.55);
}More from 26 CSS Accordions — Vertical & Horizontal
Strip TabsImage RevealColor BlockNumbered SpineCurtain SlideVinyl SpineCinema ReelAurora StripDiagonal SlantStepped StairCircular ArcMarquee Header
View the full collection →