ComponentsSite blocks

Post modules

The building blocks of a news front page. FeaturedPosts is the lead grid under the masthead (one large story, three smaller, optional slider arrows). PostBlock is a section module — heading with “View all”, then the stories in one of seven layouts — with pager arrows or numbered pagination (“Page 1 of 17”). Both lay out by their own width (container queries), so a module works in a wide main column, a narrow one or a sidebar. Server components; the arrows and pagination are small islands.

blocks/site/post-modules.tsx, blocks/site/news-pagination.tsx, blocks/site/shared/post-slider.tsx, blocks/site/post-card.tsx, blocks/site/shared/news.tsxtheme · material · accent · density · font
1 of 2

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { FeaturedPosts, PostBlock, NewsPagination } from "@vamos-ui/react/blocks";

<FeaturedPosts posts={lead} label="Top stories" slider />
<PostBlock title="City" href="/city" layout="lead-list" posts={city} />
<PostBlock title="Economy" layout="big-2" posts={economy} pages={[olderEconomy]} />
<PostBlock title="Latest" layout="list" posts={latest}
  pagination={{ page, total: 17, hrefTemplate: "/latest?page={page}" }} />

Each module is a section named by its heading; every story is an article. Use one h1 per page (the masthead or a visually hidden one).

Examples

Quad lead (section front)

A wide lead with three stacked beside it. Under 48rem both layouts become a 4:3 lead, a 16:9 story and two 4:5 cards.

Category layouts

lead-list (lead with excerpt + four thumbnail rows), big-2 with pager arrows, grid with excerpts. Also: lead-grid, featured-list, trio, list.

City

View all

Economy

View all
1 of 2

Culture

View all

Latest with numbered pagination

NewsPagination wraps the kit Pagination (real links, compact under 640px) and adds “Page 1 of 17”; page 1 drops ?page=1.

Latest

Page 1 of 17

API

FeaturedPosts

PropTypeDefault
posts
Four per page; with slider, every further four make a page.
NewsPost[]—
layout
mosaic: lead on the start half, a wide story and two squares. quad: wide lead, three stacked.
"mosaic" | "quad""mosaic"
slider
Previous / next arrows and a polite “1 of 2” counter. Hidden pages stay in the DOM.
booleanfalse
label
Accessible name of the region and slider.
string—
headingLevel
Card title level.
2 | 32
priority
Eager lead image.
booleantrue

PostBlock

PropTypeDefault
title / href / hrefLabel
Section heading and its “View all” link. Omit title inside PostTabs.
ReactNode / string—
layout
See the examples.
"lead-list" | "lead-grid" | "big-2" | "featured-list" | "trio" | "list" | "grid""lead-list"
posts / pages
pages adds pager arrows through further sets.
NewsPost[] / NewsPost[][]—
columns
grid columns on wide containers.
2 | 32
excerpts
grid / trio / list excerpts (list: default on).
boolean—
pagination
Numbered pagination + “Page x of y”.
{ page; total; hrefTemplate? }—
headingSize
sm for sidebars.
"lg" | "sm""lg"
headingLevel
Card titles go one level deeper.
2 | 32
footer
After the stories (an ad, a load-more).
ReactNode—

PostLayout

PropTypeDefault
layout, posts, columns?, excerpts?, level?, common?, empty?
Just the arrangement, without a heading — for PostTabs panels.
PostLayoutProps—

NewsPagination

PropTypeDefault
page, total, hrefTemplate?, onPageChange?
Client island; hrefTemplate is a string so server components can pass it. newsPageHref(template, page) is exported.
NewsPaginationProps—
Previous
Post card
Next
Post tabs