Full-Width Hero Banners

Blog31: Full-Width Hero Banners

A stacked list of full-bleed banner cards where each post renders a 4:3 (widening to 21:9 on larger screens) image behind a dark bg-black/50 overlay, with the post title, summary, and an author-name-plus-date byline centered over it, the whole card wrapped in a link that scales the image on hover.

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

Base UI flavor

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

This installs the block to components/beste/block/blog31.tsx, plus the badge shadcn/ui primitive it uses for the optional section eyebrow.

Quick start

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

import { Blog31, blog31Demo } from "@/components/beste/block/blog31";

export default function Page() {
  return <Blog31 {...blog31Demo} />;
}

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

import { Blog31 } from "@/components/beste/block/blog31";

export default function Page() {
  return (
    <Blog31
      badge={{ label: "Featured", variant: "default" }}
      heading="Visual Stories"
      description="Immersive reading experiences."
      posts={[
        {
          image: { src: "/covers/design-systems.jpg", alt: "Design" },
          title: "The Future of Design Systems",
          summary: "How design systems are evolving.",
          date: "January 15, 2026",
          author: { name: "Lisa Park", title: "Senior Developer" },
          href: "/blog/design-systems",
        },
      ]}
    />
  );
}

Props

type Author = {
  name: string;
  title?: string;
  avatar?: { src: string; alt: string };
};

type BlogPost = {
  image: { src: string; alt: string };
  title: string;
  summary: string;
  date?: string;
  readTime?: string;
  author?: Author;
  tags?: { label: string }[];
  href?: string;
};

Behavior notes

• The header block (badge, heading, description) is conditionally rendered as a whole: the wrapping <div> only appears when at least one of badge, heading, or description is provided, and each of the three is then rendered individually only if present.
• Each card wraps its content in a next/link <Link> whose target is post.href, falling back to "#" when href is omitted, so a post with no link still renders as a clickable no-op.
• The byline always prints post.author?.name and post.date joined by a middle dot, so a post missing either an author or a date will show a stray · with a blank on one side.
• Only author.name is used in the overlay; the author.title, author.avatar, post.summary aside, post.readTime, and post.tags fields exist on the type but are never rendered by this block.
• Cards are keyed by array index, so reordering or filtering posts can cause React to reuse the wrong DOM nodes.
• Hover scales the image to scale-105 over 500ms via the group/blog31 scope, while overflow-hidden on the <article> clips the enlarged image to the card bounds; there is no interactivity or state beyond this CSS transition.
• Images use a plain <img> tag (not next/image), positioned absolutely to fill the aspect-ratio box with object-cover.