Press Release Wall

Blog55: Press Release Wall

A dense, image-free wall of press release cards on soft muted surfaces, dealt round robin into three columns under a Badge7 eyebrow and a large heading. Each card pairs a release type and date with a headline, dek, byline, and a ruled category row.

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

Base UI flavor

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

This installs the block to components/beste/block/blog55.tsx and its dependencies, including the Badge7 component it renders.

Quick start

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

import { Blog55, blog55Demo } from "@/components/beste/block/blog55";

export default function Page() {
  return <Blog55 {...blog55Demo} />;
}

Then replace the demo with your own props. Cards are dealt round robin into three columns, so a multiple of three keeps the columns even.

import { Blog55 } from "@/components/beste/block/blog55";

export default function Page() {
  return (
    <Blog55
      badge={{ label: "Media room" }}
      heading="Press releases and regulatory announcements"
      description="Every release the group has issued, newest first."
      items={[
        {
          kind: "Press release",
          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",
        },
        {
          kind: "Financial",
          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",
        },
      ]}
    />
  );
}

Props

type Badge = {
  label: string;
};

type Article = {
  kind: 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;
};

There is no image field on Article. The block renders no photography at all, which is what gives it the investor relations archive character.

Behavior notes

• Cards are dealt into three columns by index, so item i belongs to column i % 3. The columns are three real flex elements rather than a CSS columns container, which keeps the reading order predictable down each column instead of depending on how the browser balances heights.
• The grid is one column on mobile, two from sm, and three from lg. Below lg the three dealt columns simply reflow into the available tracks, so a short release list still fills the row evenly.
• Card height follows its own content. Nothing is clamped or height-locked, so a long dek makes a taller card and the columns end at different heights, which is what gives the wall its staggered edge. Pass a multiple of three to keep them close.
• The category row is separated by a border-t border-current/10 rather than a hard border colour, so the rule tints with the card surface instead of cutting across it.
• Every card is a Next.js Link with a visible focus ring, and the headline picks up an underline on hover. Card surfaces do not change on hover, and there is no state or timer in the block.