Full-Width Stacked Cards

Blog22: Full-Width Stacked Cards

A vertically stacked list of full-width blog cards inside a max-w-4xl column, each card rendering a linked 2:1 cover image, an optional first-tag badge, a linked title, a full summary paragraph, and a footer row that pairs an author avatar with date and read-time metadata against a "Read article" ghost button, preceded by an optional centered badge, heading, and description header.

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

Base UI flavor

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

This installs the block to components/beste/block/blog22.tsx, plus the badge, avatar, and button shadcn/ui primitives it uses for the tag and header badges, author avatars, and read-more button.

Quick start

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

import { Blog22, blog22Demo } from "@/components/beste/block/blog22";

export default function Page() {
  return <Blog22 {...blog22Demo} />;
}

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

import { Blog22 } from "@/components/beste/block/blog22";

export default function Page() {
  return (
    <Blog22
      badge={{ label: "Long Reads", variant: "default" }}
      heading="In-Depth Articles"
      description="Deep dives into complex topics."
      labels={{ readMoreLabel: "Read article" }}
      posts={[
        {
          image: { src: "/covers/design-systems.jpg", alt: "Design systems" },
          title: "The Future of Design Systems",
          summary: "How design systems are evolving to meet the demands of complex web apps.",
          date: "January 15, 2026",
          readTime: "8 min read",
          author: {
            name: "Lisa Park",
            title: "Senior Developer",
            avatar: { src: "/avatars/lisa.jpg", alt: "Lisa Park" },
          },
          tags: [{ label: "Design", href: "/blog/design-systems" }],
          href: "/blog/design-systems",
        },
      ]}
    />
  );
}

Props

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

type Tag = {
  label: string;
  href?: string;
};

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

Behavior notes

• The header block is only rendered when at least one of badge, heading, or description is truthy; with all three omitted the list starts flush at the top of the section.
• Only the first tag is rendered per card (post.tags?.[0]) as an outline badge; any additional tags in the array are ignored, and neither the header badge nor the tag badge is a link even though Tag carries an optional href.
• Every clickable target on a card (image, title, and read-more button) links to the same post.href, falling back to "#" when href is omitted, so cards without an href still render as inert anchors rather than plain text.
• The cover image scales up on hover through the shared group/blog22 group, and the title shifts to text-primary on that same hover; these are the only interactive states, there are no click callbacks to wire up.
• The avatar AvatarFallback is derived from author.name by joining the first character of each whitespace-split word, so multi-word names produce initials while a single-word name yields one letter.
• The metadata line renders post.date followed by readTime only when present, joined by a middle-dot separator; if author is omitted entirely the whole avatar-and-metadata cluster disappears, leaving just the read-more button in the footer row.
• author.title is present in the type and demo data but never rendered by the component.