Blog
Blog Magazine
A magazine's pages: groups of posts (a pick, two columns, rows, cards or the article itself) beside a sidebar of widgets.
Layout and motion from the Denzel 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 |
|---|---|---|---|
| groups | MagazineGroup[] | pick, columns, rows | The groups in the order of the page, each with its layout: pick (a large card beside two small ones), columns (two columns of a feature card over two mini cards), rows (text beside a square photo, with a View more button), cards (three across), article (the post itself: breadcrumbs, the h1, the author, a cover and the body). Each opens on a line with its title and an action link. |
| groups[].posts | { title, href, image, category?, categoryHref?, excerpt?, author?, date?, dateTime? }[] | — | The posts of a group; author is { name, href?, image? }. |
| groups[].body | ({ kind: "p" | "h2" | "h3", text } | { kind: "list", items })[] | — | article: the body as data; a list item may hold its own list; **words** are bold. |
| groups[].empty | string | — | Said when a group has no posts (a category without any). |
| sidebar | { widgets } | false | about, recent, topics | Widgets beside the groups (30% from 1024px, under them below): about (brand, text, socials), recent (round photos with title and date), topics (two columns of round photos, names and counts). false gives the groups the row. |
| buttonStyle | "spring" | "flip" | "sweep" | "spring" | The look of the View more button. |
| className | string | — | Classes for the <section>. |
- Every card photo rests at 110% and settles to 100% while its card is pointed at or focused (the round ones at 105%); titles, categories and names underline under the pointer. No entrance motion.
- Each card is an <article> whose title is the link; the photo's link is out of the Tab order and hidden from screen readers. The article group holds the page's h1: use it on a post page with a header and no other hero.
