Newsroom Masonry
(Newsroom)
Latest from the Northwind press office
Filings, operating updates, and executive announcements, published as they clear review.
Filings, operating updates, and executive announcements, published as they clear review.
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.