Projects & work
Projects Accordion
Case studies as rows that open in place: a chip and headline, a summary, a result with a button, and a photo.
Layout and motion from the Balancee template — see it in contextTry it in the page builderBlocks come with Pro
Preview every block now, in any theme and at any width. The source, the install command and the AI prompt unlock when Pro opens, once the catalog reaches 20 templates.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Recent case studies" | The h2 over the rows. |
| link | { label, href } | — | A text link under the title, at the right from 768px. |
| projects | { name, chip?, headline, summary, result?: { value, label }, href, image }[] | 3 projects | One row each, numbered in order; the first opens at load. |
| detailLabel | string | "See detail" | The button in an open row's result strip, named with the project for screen readers. |
| buttonStyle | "spring" | "flip" | "sweep" | "spring" | The look of the buttons. |
| className | string | — | Classes for the <section>. |
- Rows open on their own (several at once) with a click anywhere on a closed row; the height on a spring with no bounce, the plus becoming a minus on a little bounce (accordion-list); the content shows at once. Closed content is inert.
- From 1024px the open row's photo (300 × 325px) sits at the right of the text; below it goes under the text. No entrance motion.
