Front Page Columns

Blog46: Front Page Columns

A newsroom front page built on the Polaris section header: the heading, a vertical divider, and a Badge6 eyebrow share one row above a hairline rule. The first article is promoted to a wide lead whose headline and standfirst split across a twelve-column band under a panoramic image, and every remaining article is set as a bordered text 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/blog46?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

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

Quick start

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

import { Blog46, blog46Demo } from "@/components/beste/block/blog46";

export default function Page() {
  return <Blog46 {...blog46Demo} />;
}

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

import { Blog46 } from "@/components/beste/block/blog46";

export default function Page() {
  return (
    <Blog46
      heading="Harbor Ledger"
      label="June 2026"
      items={[
        {
          image: { src: "/news/terminal.jpg", alt: "Container cranes at dawn" },
          category: "Operations",
          title: "The east terminal reopens three weeks ahead of schedule",
          summary:
            "Dredging finished on 2 June and the first post-panamax call is booked for the end of the month.",
          date: "June 4, 2026",
          author: { name: "Elena Rourke", title: "Operations Correspondent" },
          href: "/news/east-terminal",
        },
        {
          category: "Markets",
          title: "Freight rates settle after a volatile spring",
          summary:
            "Spot pricing on the northern lane closed the quarter within four percent of its January level.",
          date: "May 29, 2026",
          author: { name: "Tomas Vidal", title: "Markets Editor" },
          href: "/news/freight-rates",
        },
        {
          category: "Governance",
          title: "Port authority publishes its first tariff review in a decade",
          summary:
            "The consultation runs until September and covers berthing, storage, and pilotage in one document.",
          date: "May 21, 2026",
          author: { name: "Priya Nair" },
          href: "/news/tariff-review",
        },
      ]}
    />
  );
}

Props

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

Behavior notes

• The block splits items by position: index 0 renders as the lead and items.slice(1) fills the card grid. Both halves are conditionally rendered, so a single-item array prints only the lead, and an empty array leaves just the header and its rule.
• The card grid is a plain three-up md:grid-cols-3. Counts other than four still lay out correctly, wrapping into further rows of three; each card is its own bordered surface, so no vertical divider logic is needed and nothing has to be recalculated per row.
• Cards are flex columns with the byline pushed to the foot by mt-auto, so a short summary and a long one still produce cards of equal height with their bylines aligned across the row.
• The lead image is optional and its aspect ratio widens from aspect-video to md:aspect-[21/9]; on hover it scales to scale-105 behind a motion-safe: guard, and the headline shifts to text-primary on the same group hover. The headline and the category/summary/byline pair sit in a twelve-column grid at md (7 and 5 columns) and stack in source order below it.
• Bylines are plain text built by an internal formatByline helper as By {name}, {title} · {date}, with the title segment dropped when author.title is absent. author.avatar and author.href are accepted by the type but are not rendered, since the story link already wraps the byline.