# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/block/blog55. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-07-31

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
1. /
2. [Blocks](/blocks)
3. /
4. [Blog](/blocks/blog)
5. /
6. Press Release Wall

# Press Release Wall[PRO](/pricing)

A three-column wall of image-free press release cards on soft muted surfaces under a parenthetical eyebrow and a large heading, each card pairing a release type and date with a headline, dek, byline, and a ruled category row.

ViewCodeDocs

Base UI

![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/blog55`

## 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.

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.

[Upgrade NowUpgrade Now](/pricing)

### Installation

Swap `YOUR_EMAIL` and `YOUR_KEY` for the email and license key on your account. Find your license key on your [account page](/account).

**Radix flavor**

bashCopy

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

**Base UI flavor**

bashCopy

```
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.

tsxCopy

```
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.

tsxCopy

```
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

| 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\[\] | \[\]    | Release cards, dealt round robin into three columns |
| className   | string      | –       | Extra classes merged onto the outer section element |

tsCopy

```
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.

## More Blog blocks

[View all Blog](/blocks/blog)

[](/block/blog53)

PRO

blog53

### Mixed Release Masonry

A press office masonry wall under a parenthetical eyebrow and a large heading, mixing photo cards with image-free release cards on soft muted surfaces, each release card closing on a read-through line with a corner arrow.

[](/block/blog45)

PRO

blog45

### Press Room Digest

A press room listing with a square eyebrow, a bold heading and intro over a hairline rule, a wide lead release with a panoramic image, and the remaining releases stacked as ruled rows that pair a date column with a release type, headline, dek, and a square arrow chip.

[](/block/blog52)

PRO

blog52

### Newsroom Masonry

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.

[](/block/blog47)

PRO

blog47

### Bulletin Columns

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.

[](/block/blog49)

PRO

blog49

### Quad Ledger

An image-free newsroom index with a square eyebrow, a two-column heading band over a hairline rule, four linked release cards that each pair an accent counter with a kicker, headline, dek, and byline, and a seal button to the full archive.

[](/block/blog46)

PRO

blog46

### Front Page Columns

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.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.