Quad GridPRO

Blog48: Quad Grid

A newsroom listing section that opens with a Badge6 eyebrow and a two-column heading band above a hairline rule, then lays four equally weighted stories into a 2x2 grid of bordered cards where each cell links through a hover-zoom cover image, a category kicker, a bold headline, a summary, and a byline pinned to the foot of the card.

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

Base UI flavor

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

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

Quick start

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

import { Blog48, blog48Demo } from "@/components/beste/block/blog48";

export default function Page() {
  return <Blog48 {...blog48Demo} />;
}

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

import { Blog48 } from "@/components/beste/block/blog48";

export default function Page() {
  return (
    <Blog48
      label="Press room"
      heading="Announcements from the Meridian communications desk"
      description="Filings, operating updates, and leadership changes, published as they are released."
      items={[
        {
          image: { src: "/press/harbour-terminal.jpg", alt: "Cranes above a container terminal at dusk" },
          category: "Operations",
          title: "Harbour terminal reopens after a nine-week refit",
          summary:
            "Berth three returns to full throughput this month, restoring the northern corridor to its pre-refit schedule.",
          date: "April 2, 2026",
          author: { name: "Ingrid Halvorsen", title: "Head of Communications" },
          href: "/press/harbour-terminal",
        },
        {
          image: { src: "/press/half-year.jpg", alt: "A printed results summary on a meeting table" },
          category: "Markets",
          title: "Half-year results hold margins flat against a softer freight index",
          summary:
            "Volumes tracked guidance and the board reaffirmed the payout policy set out in January.",
          date: "March 18, 2026",
          author: { name: "Tomas Weill", title: "Investor Relations" },
          href: "/press/half-year",
        },
      ]}
    />
  );
}

Props

type Article = {
  image: { src: string; alt: 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;
};

Behavior notes

• The grid is one column below the sm breakpoint and two columns from sm up, separated by a real gap-6. Each cell is its own bordered card, so an item count that is not a multiple of two simply leaves the last row half full rather than stranding a rule.
• Cards are flex columns and the byline is pushed to the foot with mt-auto, so a short summary and a long one still produce cards of equal height with their bylines aligned across the row.
• Each card wraps its image, kicker, headline, summary, and byline in one Next.js Link to item.href, tagged with the named group group/blog48. Hovering it scales the cover image to scale-105 under a motion-safe: guard and shifts the headline to text-primary.
• The heading band is a md:grid-cols-2 grid whose description sits in a md:items-end md:justify-end flex wrapper capped at max-w-md, so heading and description stack in source order below md and split left and right above it. All three of label, heading, and description are conditionally rendered and drop out cleanly when omitted; the rule under the band always renders.
• The byline prints only author.name and date, joined by a middot. The optional title, avatar, and href fields on Author are typed and accepted but never rendered.