# 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/blog53. 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. Mixed Release Masonry

# Mixed Release Masonry[PRO](/pricing)

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.

ViewCodeDocs

Base UI

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

## Blog53: Mixed Release Masonry

A press office masonry wall that mixes photo cards with image-free release cards on soft muted surfaces, beneath a `Badge7` eyebrow and a large heading. The card type belongs to the position in the wall, so the two release cards always land in different columns instead of stacking into a single band.

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

**Base UI flavor**

bashCopy

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

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

### Quick start

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

tsxCopy

```
import { Blog53, blog53Demo } from "@/components/beste/block/blog53";

export default function Page() {
  return <Blog53 {...blog53Demo} />;
}
```

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

tsxCopy

```
import { Blog53 } from "@/components/beste/block/blog53";

export default function Page() {
  return (
    <Blog53
      badge={{ label: "Press office" }}
      heading="Northwind newsroom"
      description="Filings and operating updates, published as they clear review."
      labels={{ releaseLink: "Read the release" }}
      items={[
        {
          image: { src: "/press/aragon.jpg", alt: "Battery cabinets in a storage hall" },
          category: "Operations",
          kind: "Press release",
          title: "Aragon storage campus enters commercial operation",
          summary: "The 240 MWh facility begins dispatch two quarters early.",
          date: "March 4, 2026",
          author: { name: "Maria Santos", title: "Tech Lead" },
          href: "/press/aragon-storage",
        },
        {
          image: { src: "/press/q4.jpg", alt: "Quarterly figures on a screen" },
          category: "Markets",
          kind: "Financial",
          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\[\]  | \[\]    | Cards rendered into the wall, in order                                       |
| labels      | Blog53Labels | {}      | Text of the release card's read-through line; the line is dropped when unset |
| className   | string       | –       | Extra classes merged onto the outer section element                          |

tsCopy

```
type Badge = {
  label: string;
};

type Blog53Labels = {
  releaseLink?: string;
};

type Article = {
  image: ArticleImage;
  category: string;
  kind: string;
  title: string;
  summary: string;
  date: string;
  author: Author;
  href: string;
};

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

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

Photo cards render `category`, `title`, and the author line; release cards render `kind`, `date`, `title`, and `summary`. Every field is used by one card type or the other, so fill all of them even though any single card only shows a subset.

### Behavior notes

* Card type is decided by position, cycling through a six-entry list: positions 1 and 4 are the image-free release cards and the rest are photo cards, with image ratios `aspect-[4/5]`, `aspect-video`, `aspect-square`, and `aspect-[3/4]`. That placement puts the two release cards in different columns at both the two-column and three-column breakpoints instead of stacking them into one band.
* The list wraps past six items, so a seventh card is a photo card again. Reordering `items` changes which stories get the release treatment, so keep the ones with a strong `summary` on positions 1 and 4.
* Release cards render an image-free layout, so an `image` supplied on an article landing in position 1 or 4 is not displayed. Supply one anyway, since reordering can move it into a photo position.
* The read-through line renders only when `labels.releaseLink` is set, and it is plain text inside the card's anchor rather than a nested link, so the whole card stays a single tab stop.
* The layout is `columns-1` on mobile, `sm:columns-2`, and `lg:columns-3`, with `break-inside-avoid` on each card. Every card is a Next.js `Link` with a visible focus ring; there is no state and no timer. Covers carry no hover treatment, and the corner arrow's nudge under `motion-safe` is the only motion in the block.

## More Blog blocks

[View all Blog](/blocks/blog)

[](/block/blog55)

PRO

blog55

### Press Release Wall

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.

[](/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/blog51)

PRO

blog51

### Mixed Tile Mosaic

A six-slot mosaic under a parenthetical eyebrow and a large heading, mixing full-bleed photo tiles with flat text tiles on muted and inverted surfaces, where the treatment belongs to the slot and every tile advances one story through a larger article pool on a timer, staggered 100 milliseconds apart so the refresh reads as a wave running left to right, pausing on hover, focus, tabs, and reduced motion.

[](/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/blog12)

PRO

blog12

### Masonry Pinterest Grid

Pinterest-style masonry layout with varying content heights. CSS columns create organic flow with cards of different summary lengths.

[](/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.

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