Hero
Hero Posts
A magazine's front: a heading beside a pitch and a newsletter field, then the newest posts in a slideshow of large photo slides over small cards.
Layout and motion from the Kendi 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; the post titles are one level under it. |
| label | string | "Welcome to the journal" | A small line over the heading; empty for none. |
| title | string | — | The heading. |
| lead | string | — | The pitch over the field, at the right of the heading from 768px; empty for none. |
| subscribe | { placeholder?, submitLabel?, label?, successMessage? } | false | — | The newsletter field (Framebrick UI subscribe-input); false leaves it out. |
| onSubscribe | (email: string) => Promise<void> | void | — | Sends the address; throw to show the error state. Without it the field pretends to send. |
| slides | { title, href, image, category?, categoryHref?, excerpt?, author?: { name, href? }, date?, dateTime? }[] | 4 posts | The slideshow, newest first: one 500px slide at a time. |
| posts | same as slides | 4 posts | Small cards under the slideshow: three from 1024px, two columns from 768px with a fourth card shown only there, one column on phones. |
| labels | { slides?, on?, by? } | — | The slideshow's name and the words before a date and an author. |
| className | string | — | Classes for the <section>. |
- The slideshow steps every 8s and loops (Framebrick UI slideshow, Kendi's spring 200 / 40), with arrows on the sides while pointed at or focused, dots over its foot below 1024px, and drag. It does not run by itself with reduced motion.
- A slide's photo grows to 105% while pointed at and a small card's 5px photo inset closes (Kendi's spring bounce 0, 0.4s → 400ms transitions; none with reduced motion). No entrance motion, as on Kendi.
- Dropped from Kendi: its fonts, black button, paper page and Phosphor icons; its white cards become the card colour with a border.
