Mixed Release MasonryPRO

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.

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

Base UI flavor

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.

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:

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

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.