Features & services
Services Index
The services as an index of large names or as tabs: the chosen one's summary, photo and link sit beside the list, under its name when narrow.
Layout and motion from the Tustel 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 |
|---|---|---|---|
| label | string | "Services" | A small line above the heading; empty for none. |
| title | string | — | The h2; also the name of the list for screen readers. |
| lead | string | — | Text at the right of the heading from 768px, up to 300px; empty for none. |
| items | { title, summary, image, points?, href? }[] | 5 services | The services in order. points show in the tabs panel; href adds a button to the panel. |
| look | "index" | "tabs" | "index" | index: the names large and numbered (01 —), the others at 65%, chosen by pointing, a click or Enter. tabs: the names as tabs, the chosen one filled with the primary colour, chosen by a click or Enter, beside a wider panel with the points, the button and the photo. |
| moreLabel | string | "Learn more" | The label of the panel's button. |
| className | string | — | Classes for the <section>. |
- The panel sits beside the list when the list is at least 576px wide (index-list's container query) and opens under the chosen name below that, by height. Each panel is in the page once.
- The names step back to 65% with a spring (bounce 0.2, 0.4s); the panel changes at once beside the list. Arrow keys are not used: each name is a button.
