Hero
Hero Listings
A property site's opening: the heading and a button beside two figures and a turning testimonial, over a slideshow of large listing cards.
Layout and motion from the Goeboek template — see it in contextTry it in the page builderBlocks come with Pro and Ultimate
Preview every block now, in any theme and at any width. The source, the install command and your registry token come with a Pro or Ultimate plan.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| as | "h1" | "h2" | "h1" | The heading's level. |
| title / lead | string | — | The heading and the line under it. |
| action | { label, href, variant? } | See all listings | The button under the lead. |
| figures | { value, label }[] | 2 figures | Two figures side by side at the right of the top row. |
| testimonials | { label?, items: { quote, name, photo?, rating? }[], more? } | false | 3 reviews | A testimonial that turns every 4s, the quote cut after three lines, and a More link. false leaves it out. |
| listings | { title, href, image, type?, category?, location, beds, baths, area, price, agent?, tour? }[] | 4 listings | One large card at a time: the photo beside a panel with the figures, the price, the agent (from 1024px) and a tour button; every 8s, dots over the frame, arrows on its sides while pointed at or focused. |
| labels | { listings?, beds?, baths?, area?, price?, agent?, contact?, tour? } | — | The words of a listing card and the slideshow's name. |
| buttonStyle | "spring" | "flip" | "sweep" | "spring" | The look of the buttons. |
| className | string | — | Classes for the <section>. |
- The listings step every 8s on a spring (200 / 40 / 1) and do not stop under the pointer; the testimonials every 4s. Neither runs by itself with reduced motion; the dots and arrows still move them. No entrance motion.
- Each slideshow is its own named carousel region, so the section has none; the listing titles are h3s under a visually hidden h2.
