A twelve-column newsroom band under a parenthetical eyebrow, pairing one lead story carrying a pinned marker, a large image, and a byline block with a stack of four ruled secondary rows, closing on a pill button to the archive.
A twelve-column newsroom band under a Badge7 eyebrow, pairing one lead story that carries a pinned marker, a large image, a summary, and an author block with a stack of ruled secondary rows beside it. A Button12 pill button to the archive closes the section.
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/blog54?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/blog54?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/blog54.tsx and its dependencies, including the Badge7 and Button12 components it renders.
The installed file exports blog54Demo alongside the block: the exact props behind the preview above. Spread it to get a working band in one line.
import { Blog54, blog54Demo } from "@/components/beste/block/blog54";
export default function Page() {
return <Blog54 {...blog54Demo} />;
}Then replace the demo with your own props. The first item becomes the lead and everything after it fills the secondary stack, so pass the flagship announcement first.
import { Blog54 } from "@/components/beste/block/blog54";
export default function Page() {
return (
<Blog54
badge={{ label: "Press office" }}
heading="Northwind newsroom"
description="Filings and operating updates, published as they clear review."
labels={{ featured: "Featured" }}
button={{ label: "All press releases", href: "/press" }}
items={[
{
image: { src: "/press/aragon.jpg", alt: "Battery cabinets in a storage hall" },
category: "Operations",
title: "Aragon storage campus enters commercial operation",
summary: "The 240 MWh facility begins dispatch two quarters ahead of schedule.",
date: "March 4, 2026",
author: { name: "Maria Santos", title: "Tech Lead" },
href: "/press/aragon-storage",
},
{
image: { src: "/press/q4.jpg", alt: "Quarterly figures on a screen" },
category: "Markets",
title: "Fourth-quarter revenue climbs 12 percent",
summary: "Recurring service contracts pass half of group revenue.",
date: "February 26, 2026",
author: { name: "David Chen", title: "Backend Engineer" },
href: "/press/q4-revenue",
},
]}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | Badge | – | Badge7 parenthetical eyebrow above the heading |
heading | string | – | Section heading |
description | string | – | Muted supporting paragraph under the heading |
items | Article[] | [] | First entry becomes the lead; the rest fill the secondary stack |
button | ActionButton | – | Button12 pill button centered under the band; omitted entirely when absent |
labels | Blog54Labels | {} | Copy for the pinned marker above the lead headline |
className | string | – | Extra classes merged onto the outer section element |
type Badge = {
label: string;
};
type Article = {
image: ArticleImage;
category: string;
title: string;
summary: 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;
};
type ActionButton = {
label: string;
href: string;
};
type Blog54Labels = {
featured?: string;
};items[0] renders as the lead and items.slice(1) fills the secondary stack. A single item produces a lead with no stack beside it, and an empty array leaves only the header and the button.md the two halves stack in source order, lead first.labels.featured is set. It pairs a Pin icon with the label and sits above the lead's category line, so the lead reads as deliberately placed rather than merely first.border-t and the first row drops both its rule and its top padding, so the stack opens flush with the lead image rather than under a stray hairline.author.avatar in a round frame beside the name and title; secondary rows print the author as plain text. author.href is never rendered as a nested link, since each row is already a single anchor.Link anchors with visible focus rings. There is no state and no timer, and photos carry no hover treatment.blog44
A newsroom listing with a heading, a divider, and an eyebrow over a hairline rule, a two-column lead story with a large image, the remaining stories stacked as numbered ruled rows with square thumbnails, and a seal button to the full archive.
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.
blog47
A newsroom bulletin with a square eyebrow, an image-free lead story split across a 7/5 grid with a standfirst, byline, and a seal button, then three illustrated columns with hover-zoom images below a single hairline rule.
blog52
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.