ComponentsSite blocks

Post card

One story in a news or magazine layout, in five shapes: overlay (title over the photo), stack (photo, then title), row (small thumbnail), list (wide thumbnail with excerpt) and text. Each is an article whose title link covers the card — one tab stop — with the section badge as its own link above it. Byline: author, time[datetime], comment count (announced in full), reading time. Server component.

blocks/site/post-card.tsx, blocks/site/shared/news.tsx, blocks/site/shared/labels-news.ts, styles/blocks.csstheme · material · accent · density · font

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 { PostCard, type NewsPost } from "@vamos-ui/react/blocks";

// NewsPost is a superset of BlogList's PostSummary: the same CMS mapping feeds both.
<PostCard post={post} variant="overlay" size="xl" priority />
<PostCard post={post} variant="stack" excerpt />
<PostCard post={post} variant="row" />
<PostCard post={post} variant="text" rank={1} meta={{ author: false }} />

Overlay text sits on a bottom-weighted scrim; titles are clamped to four lines in small cells.

Hover underlines the title (an animated 1px rule) and nudges the photo; both are off under reduced motion.

Examples

Ranked text cards, Turkish

rank prints a large number before the title (hidden from screen readers: the list order carries it). newsLabelsTr translates the byline, comments and reading time.

API

PostCard

PropTypeDefault
post
href, title, excerpt?, cover?, category? { label, href? }, publishedAt, updatedAt?, author? { name, href? }, commentCount?, readingMinutes?, format? (video | gallery | live), id?.
NewsPost—
variant
Card shape.
"overlay" | "stack" | "row" | "list" | "text""stack"
size
Title scale: xl/lg in the display face, md/sm in the text face.
"xl" | "lg" | "md" | "sm"by variant
excerpt
Show the standfirst (stack, list, text).
booleanfalse
meta
{ author, date, comments, readingTime } toggles; false hides the byline.
PostMetaFields | falseall on
category
Show the section badge.
booleantrue (row: false)
rank
Large rank number before the title (most-read lists).
number—
headingLevel
Title level — one below the module heading.
2 | 3 | 43
aspect
Crop of the cover.
"16:10" | "3:2" | "4:3" | "1:1" | "16:9"—
fill
overlay: fill the parent box (grid cells) instead of keeping the ratio.
boolean—
priority / sizes
Image loading hints (the lead story is the LCP).
boolean / string—
locale / labels / components / className
labels: NewsBlockLabels (newsLabelsTr for Turkish).
…—

PostMeta · CategoryBadge · ModuleHeading · NewsDate

PropTypeDefault
—
The card's byline row, section badge, the section heading with a heavy rule (lg / sm) and the date element, for your own layouts.
server components—

newsArticleJsonLd(post, opts) · newsItemListJsonLd(posts, opts)

PropTypeDefault
opts
NewsArticle (with NewsMediaOrganization publisher) and ItemList nodes for <JsonLd>.
{ origin?, publisher?: { name, logo?, url? }, name? }—
Previous
Popover
Next
Post modules