Press Coverage ListPRO

News36: Press Coverage List

Press section built around a soft panel holding the standout quote and the publication that ran it, followed by coverage rows that line up publication, headline, and date across a hairline list, and a press kit action to close.

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

Base UI flavor

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

This installs the block to components/beste/block/news36.tsx plus the badge23 and button21 components it uses for the eyebrow and the press kit action.

Quick start

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

import { News36, news36Demo } from "@/components/beste/block/news36";

export default function PressPage() {
  return <News36 {...news36Demo} />;
}

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

import { News36 } from "@/components/beste/block/news36";

export default function PressPage() {
  return (
    <News36
      badge={{ label: "Press" }}
      heading="Where people are writing about the work"
      featured={{
        publication: "Health Tech Weekly",
        quote: "The rare clinical tool that reads like someone has stood behind a desk.",
        date: "April 9, 2026",
        link: { label: "Read the full piece", href: "https://example.com/piece" },
      }}
      items={[
        {
          publication: "The Practice Journal",
          headline: "The quiet economics of a clinic that stops chasing paperwork",
          date: "March 27, 2026",
          href: "https://example.com/coverage",
        },
      ]}
      footnote={{
        label: "Writing about us? The press kit has logos and the boilerplate.",
        button: { label: "Download the press kit", href: "/press-kit" },
      }}
    />
  );
}

Props

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

type FeaturedMention = {
  publication: string;
  quote: string;
  date: string;
  link: ActionLink;
};

type Mention = {
  publication: string;
  headline: string;
  date: string;
  href: string;
};

Behavior notes

• The featured quote is set unquoted at display size rather than wrapped in quotation marks, with the publication above it as the attribution, so the panel reads as a pull quote instead of a testimonial card.
• Publication names are plain muted text, not a monospace kicker, which keeps the row reading as publication then headline rather than as a label attached to a value.
• Rows are a three-column grid from md (minmax(0,14rem)_1fr_auto), so publications line up in a column of their own however long the headlines run, and stack in source order below that width.
• Every row is a next/link around the whole grid, and both the headline colour and the arrow nudge react from a single named group on it.
• The block never validates that href points off-site, so external coverage links should carry their own target handling if you want them opening in a new tab.
• Dates are display strings and are never parsed or sorted, so the newest-first order has to come from the data.