Process
Process Panels
A title beside a row of step panels: one open at a time, with a rule, a note and a photo, the rest narrowed to their number.
Layout and motion from the Ciketo template — see it in contextBlocks 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 |
|---|---|---|---|
| label | string | How it works | Small muted line above the heading. |
| title / lead | string | — | Heading (h2) and the text under it (up to 450px); the title also names the list of panels. |
| steps | { title, text, label?, note?, image? }[] | 4 steps | Panels in an ordered list, numbered 01 / 04…; the first is open. An open panel shows the title (h3) and text, then a rule, the label over the note, and the photo (3:2, up to 450px). |
| height | number | 600 | Height of the row from 768px up, in pixels. |
| className | string | — | Classes for the <section>. |
- The title and the panels stack 50px apart and sit side by side from 1280px (a title column 350px wide, tops aligned). Ciketo's row starts at 1200px, but an open panel needs about 450px, so it waits for 1280px; below that the panels take the full width of the container.
- From 768px the panels are a row 600px tall, 10px apart: the open one takes the free width and spreads its parts from top to bottom, the closed ones (105px wide) show only their number at 70% opacity. Below 768px they are a column, where closed panels keep their number and title and the open one opens by height.
- A click on a closed panel opens it and closes the open one (spring, bounce 0, 0.4s); there is no timer and no hover. Each number is a button (aria-expanded) named by the step's title, the details of a closed panel stay in the page but are inert, and the steps are an ordered list with h3 titles. With prefers-reduced-motion the state changes at once.
- Closed panels sit at 70% (Ciketo's 60%) and their text keeps its own tone, so it stays above 4.5:1 in the default, Editorial, Mono and Soft themes, light and dark. Ciketo's orange numbers and label, uppercase label, white cards and 2px corners were left out. A photo is decorative unless you give it alt text.
