Accordion
A collapsible disclosure built on native <details>/
<summary>. Animates open/close to/from
height: auto using interpolate-size, with a
grid-template-rows: 0fr to 1fr universal fallback.
Multiple open (default)
What is Porchlight?
Porchlight is a no-dependency, native-CSS framework. It ships as a
single stylesheet with tokens, themes, layout, and components.
Does it use JavaScript?
No. The framework ships zero JavaScript. All interactivity is native
HTML (details, popover, dialog) or CSS-driven.
What browsers are supported?
Baseline 2025+ browsers. Core features work everywhere; advanced
features are gated behind
@supports.
Open by default
This item starts open
Add the
open attribute to <details> to
start expanded.