Blog
Blog Directory
Every category or every writer of a blog: a card each with a photo, the name, a line and a button, and from 1024px their newest posts beside it.
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" | "h2" | The heading's level; the names are one level under it. |
| title | string | "Categories" | The heading. |
| kind | "categories" | "authors" | "categories" | categories: a 400px card (photo, name and description centred, button) beside rows of posts under a small heading. authors: a profile card (30%: photo with the social links, name, role, bio, button) beside cards of posts in two columns. |
| items | { name, href, image, text, role?, socials?, posts? }[] | 3 categories | One per category or writer; text is the description or the bio; posts ({ title, href, image, category?, excerpt?, date?, dateTime? }) show beside the card from 1024px — up to three rows, or four cards. |
| previewTitle | string | "From this category" | kind="categories": the small heading over the posts. |
| actionLabel | string | "View articles" | Each card's button (its name is added for screen readers). |
| buttonStyle | "spring" | "flip" | "sweep" | "spring" | The look of the buttons. |
| className | string | — | Classes for the <section>. |
- Below 1024px only the cards show: one column on phones, two from 768px. From 1024px each item is a row: the card and its posts, both as tall as the row.
- Photos grow to 105% while their card or row is pointed at or focused (zoom-card; Kendi's spring bounce 0, 0.4s). No entrance motion. Kendi's photo drawn 50px inside a 100px box is a 64px photo here.
