Bulletin ColumnsPRO

Blog47: Bulletin Columns

A newsroom bulletin section that opens with a Badge6 eyebrow, then gives the first article a full-width lead treatment: a large bold headline on the left of a seven-and-five grid with its summary, byline, and a Button1 seal button stacked in the narrow right column. Below a single hairline rule, the remaining articles run as three illustrated cards, so the lead and the columns are both derived from one items array by index rather than from separate props.

Installation

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/blog47?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/blog47?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/blog47.tsx and its dependencies, including the Badge6 and Button1 components it renders.

Quick start

The installed file exports blog47Demo alongside the block: the exact props behind the preview above. Spread it to get a working bulletin in one line.

import { Blog47, blog47Demo } from "@/components/beste/block/blog47";

export default function Page() {
  return <Blog47 {...blog47Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Blog47 } from "@/components/beste/block/blog47";

export default function Page() {
  return (
    <Blog47
      label="Newsroom"
      labels={{ readMore: "Read the full statement" }}
      items={[
        {
          category: "Press release",
          title: "The co-operative approves a shared packhouse for the valley",
          summary: "Members voted at the spring meeting to fund a grading and cold-store facility.",
          date: "March 4, 2026",
          author: { name: "Maria Santos", title: "Tech Lead" },
          href: "/news/packhouse",
        },
        {
          image: { src: "/news/market-hall.jpg", alt: "Crates of squash at an open-air farm market" },
          category: "Trade",
          title: "Winter opening lifts market hall takings by 12 percent",
          summary: "Stallholder receipts stayed above forecast for a fourth quarter.",
          date: "February 26, 2026",
          author: { name: "David Chen" },
          href: "/news/market-hall",
        },
        {
          image: { src: "/news/tunnels.jpg", alt: "Two growers with a laptop outside a polytunnel" },
          category: "Operations",
          title: "Propagation moves to the Ashfield tunnels before spring plant-out",
          summary: "The transfer adds nine weeks of protected growing.",
          date: "February 11, 2026",
          author: { name: "Lisa Park" },
          href: "/news/propagation",
        },
      ]}
    />
  );
}

Props

type Article = {
  image?: { src: string; alt: string };
  category: string;
  title: string;
  summary: string;
  date: string;
  author: Author;
  href: string;
};

type Author = {
  name: string;
  title?: string;
  avatar?: { src: string; alt: string };
  href?: string;
};

Behavior notes

• The split is positional: items[0] is rendered as the lead and items.slice(1) fills the grid below. The lead prints category, headline, summary, byline, and the seal button but never an image, so an image supplied on the first item is not displayed. With an empty items array the whole lead block is skipped and only the eyebrow and the rule remain.
• Below md the section is a single stacked column. At md the lead becomes a 12-column grid split 7 for the headline and 5 for the summary column, and the lower grid becomes md:grid-cols-3. That grid is fixed at three columns, so the demo's four items fill one lead plus one full row; a fifth item wraps to a second row and fewer than four leave trailing empty columns.
• Each column card is a single Link wrapping the whole card. The cover image is rendered only when item.image is present, in an aspect-[4/3] clip that scales to scale-105 on hover under a motion-safe: guard, and the same group hover tints the card title to text-primary.
• The button renders only when labels.readMore is set, and it targets the lead's own href, the same destination as the headline. Button1 is used at its stock size; the surrounding column is sized to fit it rather than the other way round.
• Only author.name is read from Author; title, avatar, and href exist on the type but are never rendered. Bylines are composed as By {name} · {date} with the date string printed verbatim and no date formatting applied.