.accordionNo modifier class, no added CSS.
Solid --control-bg fill on the label, same as
buttons — this is the baseline every variant below is compared against.
No — this is the same checkbox/radio pattern used throughout.
.accordion-underline only. Rest state gets a
thin --light-grey underline; the open item's underline thickens and
switches to --color-1.
A dependency-free, single-stylesheet CSS framework driven entirely by custom properties — no build step, no config file.
No — tabs, accordions, dropdowns, and sidebars all use the
checkbox/radio toggle pattern. The underline is just a
box-shadow, which lets it grow without shifting layout.
Yes — every color, spacing, and radius value is a token in
:root, including a full [data-theme="dark"]
override.
.accordion-underline plus the label flexed
justify-content-between so the chevron sits flush right. Underline
thickens and the chevron rotates 180° together on open — same
.accordion-chevron rule from the top of this page, no new CSS.
A dependency-free, single-stylesheet CSS framework driven entirely by custom properties — no build step, no config file.
No — tabs, accordions, dropdowns, and sidebars all use the checkbox/radio toggle pattern.
Yes — every color, spacing, and radius value is a token in
:root, including a full [data-theme="dark"]
override.
By default, radio-based accordion items can't be closed by
clicking them again — that's native radio behavior, not a framework bug. To
opt in to closable items, do two things: add .accordion-closable
to the .accordion container, and change each item's input from
type="radio" to type="checkbox". No JavaScript, no
edits to cssvars.css — the two rules live in this page's own
<style> block and simply mirror the framework's existing
radio rules for the checkbox case. Trade-off: since checkboxes don't enforce
mutual exclusivity the way same-named radios do, more than one item can be
open at once.
A dependency-free, single-stylesheet CSS framework driven entirely by custom properties — no build step, no config file.
No — tabs, accordions, dropdowns, and sidebars all use the checkbox/radio toggle pattern.
Yes — every color, spacing, and radius value is a token in
:root, including a full [data-theme="dark"]
override.
No new CSS at all — just the existing card,
shadow-3, rounded, overflow-hidden, and
spacing utilities on the stock markup.
Link cssvars.css from the CDN and start writing
markup — the whole point is skipping a build step.
Override any --variable in your own
:root block after the framework import — the cascade layers
make sure it wins.
Reuses .icon-box, .circle, and the
bga-* alpha-background utilities already in the framework —
no new CSS beyond the shared chevron rule.
One <link> tag, nothing to install.
Every feature used — clamp(),
color-mix(), @layer — is supported in current
evergreen browsers.
The accessibility layer is still in progress — see the philosophy doc for current recommendations.
Built with love by Kim Majali, EITO team, and contributors.