Blocks
4 blocks for a blog magazine page
The index page of a magazine blog has to make someone pick an article, not show how many you wrote. Four categories, the order, the card faults with images and the real catalogue counts.
Key points
- Pick the grid by the number of articles it holds, not by the block title.
- Covers with mixed ratios move the text: a fixed ratio is required.
- The newsletter goes after two articles are read, not before.
The index page of a magazine blog has to make someone pick an article, not show how many were written. The catalogue indexes 51 hero blocks, 20 blog, 6 newsletter and 45 footer, read on 2026-11-01: four categories cover an index page.
This page covers the index, not a single article. The counts are those published by the category pages, measured on the same day: 20 blog blocks are few against 51 heroes, and that already says the grid needs adapting more often than people expect.
What the page has to do
A magazine does not sell one article: it sells the idea that coming back is worth it. The index page has to state the theme in one line, put one strong piece forward, then list the rest with date and reading time. Someone arriving from search wants to know in three seconds whether the site covers their topic, and the answer is not a carousel of twelve covers.
- A recognisable theme in one line, not “welcome to our blog”.
- One featured piece with title, standfirst and date.
- At least eight articles visible without a click, with date and minutes.
- An exit for whoever looks for the archive or an author.
The order of the blocks
| Section | Role on the page | Blocks available |
|---|---|---|
| hero | state the theme of the magazine | 51 |
| blog | make someone pick an article | 20 |
| newsletter | keep whoever reads two pieces | 6 |
| footer | give archive, authors and legal notes | 45 |
Hero, blog, newsletter, footer. The newsletter sits after the grid because it asks for an action before the reader has seen anything: moving it on top cuts the article choice, which is the real job of the page. When the magazine has a piece of the month, the blog block opens with it instead of sorting by pure date.
The blocks to start from
The tables below list block, registry, files and category. The declared category does not always match the table: the newsletter block in this catalogue comes from a registry that classifies it as a dialog, so expect a component with an overlay rather than an inline strip.
Hero blocks
| Block | Registry | File | Category |
|---|---|---|---|
| Hero 01 - Agency Hero Section | Shadcn Space | 8 | hero |
| Hero 02 - Real Estate Hero Section | Shadcn Space | 6 | hero |
Blog blocks
| Block | Registry | File | Category |
|---|---|---|---|
| Blog 01 - Latest Blog & News Grid | Shadcn Space | 2 | blog |
| Blog | 1st-pouf | 1 | blog |
Newsletter blocks
| Block | Registry | File | Category |
|---|---|---|---|
| Dialog 01 - Newsletter Subscription Dialog | Shadcn Space | 2 | dialog |
| Newsletter 01 - Newsletter Subscription CTA | Shadcn Space | 2 | newsletter |
Footer blocks
| Block | Registry | File | Category |
|---|---|---|---|
| Footer 01 - Agency Footer Layout | Shadcn Space | 3 | footer |
| Footer 02 - Dark Conversion Footer | Shadcn Space | 2 | footer |
What breaks in production
The recurring problem is the card with an image: the block assumes 16:9 covers and receives vertical files, so each row has a different height and the text moves as images arrive. The second fault is pagination: the blog block shows “load more” without saying how many articles remain, so the reader cannot tell whether the click is worth it.
- Covers without aspect-ratio: rows of different height and layout shift.
- A 300-character excerpt inside a 120-character card: the text overflows.
- A US date format inside an Italian page.
- Newsletter with a double submit: two signups for one click.
curl "https://ui.eneawork.it/api/blocks/category/blog?limit=10"The call lists the blog blocks with source and files: it counts the real variants before committing to a three-column grid. With 20 blocks in total, the real choice is narrower than the component count suggests.
A limit to declare
The 20 blog blocks are mostly static grids: none ships search, tag filters or server pagination. Once the magazine passes 40 articles the block still helps with layout, but the loading logic has to be written by hand, and that is the cost the catalogue does not show.
In the catalogue: magazine hero, components and all blocks. The guides: App Router structure, stale-while-revalidate and UI library weight.
Frequently asked questions
Must the index page list every article?
No: it has to show enough to convey the editorial angle. Eight or ten on the page are enough, as long as they are recent and readable without a click. The full archive serves whoever is already convinced and belongs behind a link, not poured into the home page.
How many articles does a typical blog block hold?
Three to six, depending on columns. Catalogue blocks declare no maximum, but the grid is written for that number: beyond it, the card keeps the height of the shortest item and the text stretches unevenly.
Is a date or a reading time better on the card?
Both, but the date is the one that says whether the piece is old. Reading time helps decide whether to open it now; without a date, a three-year-old article looks new and the reader feels misled on finding out.
Does the newsletter block work better as a dialog or inline?
Inline, under the grid, when the magazine bets on reading. The dialog interrupts and arrives with an overlay: keep it for an explicit signup, never on entry, because on mobile it covers the very article you were selling.
How do I stop the grid jumping while it loads?
By declaring width and height, or a fixed aspect-ratio, on every cover image. The browser reserves the space before download and the text stops moving. Without those two properties the layout shift is measurable and drags the page score down.