A CSS-columns masonry of linked newsroom cards under a parenthetical eyebrow and a large heading, where the image aspect ratio cycles by position so the wall keeps an uneven, magazine-like rhythm.
A blog section that renders a balanced CSS-columns masonry of linked newsroom cards beneath a Badge7 eyebrow and a large heading. The image aspect ratio cycles by position through a six-entry list, which gives the wall an uneven, magazine-like rhythm without the card heights depending on how long each headline runs.
Upgrade to Pro
Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.
Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.
Radix flavor
npx shadcn add "https://ui.beste.co/r/blog52?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/blog52?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/blog52.tsx and its dependencies, including the Badge7 component it renders.
The installed file exports blog52Demo alongside the block: the exact props behind the preview above. Spread it to get a working masonry in one line.
import { Blog52, blog52Demo } from "@/components/beste/block/blog52";
export default function Page() {
return <Blog52 {...blog52Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Blog52 } from "@/components/beste/block/blog52";
export default function Page() {
return (
<Blog52
badge={{ label: "Newsroom" }}
heading="Latest from the press office"
description="Filings and operating updates, published as they clear review."
items={[
{
image: { src: "/news/margin.jpg", alt: "A printed quarterly statement on a desk" },
category: "Markets",
title: "Record third-quarter operating margin",
date: "Nov 12, 2026",
author: { name: "David Chen", title: "Markets desk" },
href: "/news/margin",
},
{
image: { src: "/news/storage.jpg", alt: "Battery storage containers on a new site" },
category: "Operations",
title: "Second grid-scale storage site opens in Aragon",
date: "Nov 08, 2026",
author: {
name: "Maria Santos",
avatar: { src: "/team/maria.jpg", alt: "Maria Santos" },
},
href: "/news/aragon",
},
{
image: { src: "/news/board.jpg", alt: "An empty board room before a committee session" },
category: "Governance",
title: "Board appoints a new chief operating officer",
date: "Nov 04, 2026",
author: { name: "Lisa Park", title: "Corporate affairs" },
href: "/news/coo",
},
]}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | Badge | – | Badge7 parenthetical eyebrow above the heading; omitted entirely when absent |
heading | string | – | Section heading |
description | string | – | Muted supporting paragraph, capped at max-w-2xl |
items | Article[] | [] | Cards rendered into the masonry, in order |
className | string | – | Extra classes merged onto the outer <section> |
type Badge = {
label: string;
};
type Article = {
image: ArticleImage;
category: string;
title: string;
date: string;
author: Author;
href: string;
};
type ArticleImage = {
src: string;
alt: string;
};
type Author = {
name: string;
title?: string;
avatar?: { src: string; alt: string };
href?: string;
};columns-1 on mobile, sm:columns-2, and lg:columns-3, with [column-fill:_balance] and break-inside-avoid on each card, so the browser balances column heights and no card is ever split across a column break. Any item count works; the card count drives column height rather than a fixed row structure.aspect-[4/5], aspect-video, aspect-square, aspect-[4/5], aspect-video, and aspect-[3/4], wrapping past six items. Because the ratio comes from the position rather than the photo, source images of any dimensions produce the same wall.author.href is not rendered as a nested link, since the whole card is already a single anchor.Link wrapping the image, kicker, headline, and byline, with a visible focus-visible ring. There is no state, no timer, and no click handler.blog53
A press office masonry wall under a parenthetical eyebrow and a large heading, mixing photo cards with image-free release cards on soft muted surfaces, each release card closing on a read-through line with a corner arrow.
blog12
Pinterest-style masonry layout with varying content heights. CSS columns create organic flow with cards of different summary lengths.
blog46
A newsroom front page with a heading, a divider, and a square eyebrow over a hairline rule, a wide lead story whose headline and standfirst split across a twelve column band under a panoramic image, and the remaining articles set as three bordered text cards.
blog56
A six-slot photo mosaic under a parenthetical eyebrow and a large heading, where every tile is bound to one newsroom category so the grid doubles as a section map, with a ruled legend naming the sections above it.