Magazine Mosaic

Blog50: Magazine Mosaic

A blog listing section that lays articles into a fixed magazine mosaic of six tiles: a dominant two-by-two tile, a tall tile, two wide tiles, and two unit tiles, each captioning its own photo over a graded scrim. The tile shape belongs to the position in the grid, so the mosaic keeps its rhythm whatever the copy length.

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

Base UI flavor

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

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

Quick start

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

import { Blog50, blog50Demo } from "@/components/beste/block/blog50";

export default function Page() {
  return <Blog50 {...blog50Demo} />;
}

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

import { Blog50 } from "@/components/beste/block/blog50";

export default function Page() {
  return (
    <Blog50
      badge={{ label: "Press office" }}
      heading="Northwind newsroom"
      description="Operating updates and filings, published as they are released."
      items={[
        {
          image: { src: "/press/aragon.jpg", alt: "Storage containers at dusk" },
          category: "Operations",
          title: "Northwind opens its second grid-scale storage site in Aragon",
          date: "Mar 4, 2026",
          author: { name: "David Chen", title: "Backend Engineer" },
          href: "/press/aragon-storage",
        },
        {
          image: { src: "/press/q1.jpg", alt: "Quarterly figures on a table" },
          category: "Markets",
          title: "First-quarter revenue rises 12 percent",
          date: "Feb 26, 2026",
          author: { name: "Lisa Park", title: "Senior Developer" },
          href: "/press/q1-revenue",
        },
      ]}
    />
  );
}

Props

type Badge = {
  label: string;
};

type Article = {
  image: ArticleImage;
  category: string;
  title: 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;
};

Only author.name is rendered, in the tile byline. The optional title, avatar, and href fields on the author exist for shape parity with the other blog blocks and are not displayed here.

Behavior notes

• Tile shape is driven by position, not by data: item 0 gets a col-span-2 row-span-2 dominant tile with the largest title, items 1, 4, and 5 get wide col-span-2 tiles, and items 2 and 3 get single cells. The six spans tile a four-column, three-row grid exactly (4 + 2 + 1 + 1 + 2 + 2 = 12 cells), so the mosaic never leaves a gap at the end of the last row.
• Six items is the intended count. A seventh and beyond fall back to a single-cell tile, which still lays out but breaks the exact tiling, and fewer than six leaves the trailing cells empty.
• Titles are clamped per position so a long headline cannot overflow its tile: three lines on the dominant and unit tiles, two on the wide ones. The caption's kicker and byline are single truncated lines.
• The grid is two columns on mobile and four from md up, with fixed 11rem rows growing to 13rem. Captions sit over a top-to-bottom scrim rather than a flat wash, so the type stays readable against a bright photo without dulling the image.
• Every tile is a Next.js Link wrapping the whole tile, with a visible focus ring. There is no state, no timer, and no click handler; photos carry no hover treatment, so the block renders identically on the server and the client.