Editorial Article Grid

Blog43: Editorial Article Grid

A blog listing section that stacks an optional eyebrow badge over a hairline top rule, a two-column band pairing a large light-weight heading on the left with a right-aligned muted description, and a three-column grid of linked article cards, each rendering a hover-zoom cover image, a monospace uppercase category, a title, an excerpt, and an author-and-date byline.

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

Base UI flavor

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

This installs the block to components/beste/block/blog43.tsx, plus the badge23 beste component it uses to render the eyebrow badge.

Quick start

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

import { Blog43, blog43Demo } from "@/components/beste/block/blog43";

export default function Page() {
  return <Blog43 {...blog43Demo} />;
}

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

import { Blog43 } from "@/components/beste/block/blog43";

export default function Page() {
  return (
    <Blog43
      badge={{ label: "Field notes" }}
      heading="Ideas for running a calmer practice"
      description="Short, practical writing on scheduling and billing."
      items={[
        {
          image: { src: "/blog/no-shows.jpg", alt: "A tidy reception desk" },
          category: "Operations",
          title: "The five-minute habit that kills no-shows",
          excerpt: "A tiny change to how you confirm appointments does more than any reminder blast.",
          author: "Elena Rourke",
          date: "May 8",
          href: "/blog/no-shows",
        },
      ]}
    />
  );
}

Props

type Article = {
  image: { src: string; alt: string };
  category: string;
  title: string;
  excerpt: string;
  author: string;
  date: string;
  href: string;
};

Behavior notes

• Each card is a Next.js Link pointing at item.href, so navigation is real routing with no click handler or onClick callback to intercept; the whole card is the target.
• The badge, heading, and description are each conditionally rendered and disappear cleanly when their prop is missing, so the block degrades to just the card grid.
• The badge uses the imported Badge23 component and passes only item.label through; no variant or tone control is exposed.
• heading and title are rendered as plain text, not dangerouslySetInnerHTML, so inline <strong> or other markup is not interpreted.
• Cards are keyed by array index rather than href or an id, so reordering items remounts rather than reorders them.
• The card image lives in an aspect-video clip and scales to scale-105 on hover, guarded by motion-safe: so it is skipped for users who prefer reduced motion; the title also shifts to text-primary on the same group hover.
• The grid is fixed at md:grid-cols-3 regardless of how many items are passed, so fewer than three articles leave trailing empty columns and more than three wrap to new rows.
• The byline joins author and date with a middot (author · date); both strings are required on every item and are printed verbatim with no date formatting.