Announcement Story

News38: Announcement Story

A single announcement laid out like an article, with a standfirst, a full-bleed captioned photo band, a reading column and a sticky rail carrying the key facts and related entries.

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

Base UI flavor

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

This installs the block to components/beste/block/news38.tsx plus the badge23 and button21 components it uses for the eyebrow and the actions.

Quick start

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

import { News38, news38Demo } from "@/components/beste/block/news38";

export default function AnnouncementPage() {
  return <News38 {...news38Demo} />;
}

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

import { News38 } from "@/components/beste/block/news38";

export default function AnnouncementPage() {
  return (
    <News38
      badge={{ label: "Announcement" }}
      kicker="14 May 2026 · Product"
      heading="Four clinics can now share one waiting list"
      standfirst="Multi-site capacity sharing is out of testing and on every plan."
      image={{ src: "/news/clinic.jpg", alt: "A clinician in a bright clinic" }}
      caption="Bramble Health ran the first shared waiting list across three sites in March."
      facts={[
        { label: "Available on", value: "Every plan, no extra charge" },
        { label: "Tested by", value: "3 practices, 11 weeks" },
      ]}
      body={[
        "Until now a group running four clinics ran four waiting lists.",
        "Capacity is now modelled at group level while rooms and hours stay per site.",
      ]}
      buttons={[
        { label: "Read the release note", href: "/changelog/3-4-0" },
        { label: "See how it works", href: "/product/waiting-list" },
      ]}
      relatedTitle="Around the same time"
      related={[
        {
          kind: "Company",
          title: "We are profitable, and staying at eighteen people",
          date: "02 May 2026",
          href: "/news/profitable",
        },
      ]}
    />
  );
}

Props

type ActionLink = {
  label: string;
  href: string;
};

type BandImage = {
  src: string;
  alt: string;
};

type Fact = {
  label: string;
  value: string;
};

type Related = {
  kind: string;
  title: string;
  date: string;
  href: string;
};

Behavior notes

• The container is opened and closed three times: the header sits in a max-w-7xl wrapper, the photo band is a direct child of the section so it runs edge to edge, and the body opens a fresh wrapper. That is what lets one section mix gridded and full-bleed content.
• The caption sits inside its own max-w-7xl wrapper with matching padding, so it aligns with the text even though the photograph does not.
• The photograph is a real figure with a figcaption, so the caption stays associated with the image.
• Body paragraphs are plain strings rendered as separate p elements. There is no markdown parsing, so links or emphasis inside a paragraph need the block edited rather than passed in.
• Paragraphs use mb-6 with last:mb-0, so spacing lives between them and the column never ends on a stray margin.
• The rail is lg:sticky lg:top-24 lg:self-start. The self-start is required, otherwise the column stretches to the full row height and sticky has nothing to travel within. Adjust top-24 to match your own fixed header.
• The reading column is capped at max-w-2xl even though its grid track is wider, so long-form text keeps a readable measure and the extra width becomes breathing room.