Category Mosaic

Blog56: Category Mosaic

A six-tile photo mosaic under a Badge7 eyebrow and a large heading, in which every tile is bound to one newsroom category, so the layout doubles as a section map: the dominant tile is always Corporate, the tall tile is always Markets, and so on. A ruled legend names the sections above the grid.

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

Base UI flavor

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

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

Quick start

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

import { Blog56, blog56Demo } from "@/components/beste/block/blog56";

export default function Page() {
  return <Blog56 {...blog56Demo} />;
}

Then replace the demo with your own props. Articles are matched to tiles by their category string, which must be one of Corporate, Markets, Governance, Sustainability, Operations, or Research.

import { Blog56 } from "@/components/beste/block/blog56";

export default function Page() {
  return (
    <Blog56
      badge={{ label: "Newsroom" }}
      heading="Company news by section"
      description="Every tile holds one part of the newsroom."
      labels={{ legend: "Sections" }}
      items={[
        {
          image: { src: "/press/aragon.jpg", alt: "Battery cabinets in a storage hall" },
          category: "Corporate",
          title: "Aragon storage campus enters commercial operation",
          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",
          title: "Fourth-quarter revenue climbs 12 percent",
          date: "February 26, 2026",
          author: { name: "David Chen", title: "Backend Engineer" },
          href: "/press/q4-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;
};

type Blog56Labels = {
  legend?: string;
};

The tile kicker prints the tile's own category rather than the article's, so a mismatched article can never make the map lie. Only author.name is rendered, in the caption byline.

Behavior notes

• Each tile takes the first article in items whose category matches its own. Passing several articles per category is harmless, but only the first of each is shown, so trim the list to one per section unless you are reusing the same array elsewhere.
• A tile whose category has no matching article is not rendered rather than shown empty. That leaves a hole in the mosaic, so supply all six categories to keep the grid tiling exactly.
• The six spans tile a four-column, three-row grid exactly (4 + 2 + 1 + 1 + 2 + 2 = 12 cells). Article order in items does not affect the layout at all: the tile decides its own category, size, and title scale.
• Category names are matched literally and are case-sensitive. To change the sections, edit the tileStyles array in the installed file; the legend reads from the same array, so it stays in step automatically.
• The grid drops to two columns below md, with fixed 11rem rows growing to 13rem, and captions sit over a top-to-bottom scrim. Headlines are clamped per tile so a long title cannot overflow.
• Every tile is a Next.js Link with a visible focus ring. There is no state and no timer, and photos carry no hover treatment.