Alternating Feature Cards

Blog10: Alternating Feature Cards

A vertical stack of full-width blog cards where each article places a linked cover image beside a content column (tags, title, summary, author, and a "Read article" button), with the image and text swapping sides on every odd-indexed card at the lg breakpoint, above an optional centered header of badge, heading, and description.

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

Base UI flavor

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

This installs the block to components/beste/block/blog10.tsx, plus the badge, avatar, and button shadcn/ui primitives it uses for the section eyebrow and post tags, the author avatar, and the read-more button.

Quick start

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

import { Blog10, blog10Demo } from "@/components/beste/block/blog10";

export default function Page() {
  return <Blog10 {...blog10Demo} />;
}

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

import { Blog10 } from "@/components/beste/block/blog10";

export default function Page() {
  return (
    <Blog10
      badge={{ label: "Featured", variant: "default" }}
      heading="Deep Dives"
      description="In-depth articles exploring complex topics in web development."
      labels={{ readMoreLabel: "Read article" }}
      posts={[
        {
          image: { src: "/posts/design-systems.jpg", alt: "Design systems" },
          title: "The Future of Design Systems",
          summary: "Exploring how design systems evolve to meet complex applications.",
          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: "Frontend", href: "/blog/frontend" }],
          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 centered header block is only rendered when at least one of badge, heading, or description is truthy; when all three are omitted the stack of cards renders alone.
• Cards alternate layout by index: index % 2 === 1 adds lg:flex-row-reverse, so odd cards (the second, fourth, and so on) put the image on the right. Below the lg breakpoint every card stacks image over content.
• posts is keyed by array index, not a stable id, so reordering or filtering the list can confuse React's reconciliation.
• The cover image, title, and the "Read article" button all link to post.href, falling back to "#" when it is absent; each tag links to tag.href with the same "#" fallback, so an unset href yields a real anchor that navigates nowhere.
• The AvatarFallback is derived from the author name by taking the first character of each space-split word, so "Lisa Park" becomes LP; it only shows if author.avatar.src fails to load, and the whole author block is skipped when post.author is absent.
• The meta line joins post.date and post.readTime with a · separator only when readTime is set; note date itself is optional, so with only a read time the line renders as undefined · 8 min read.
• author.title is part of the Author type but is never rendered by the component; only the author name and the date/read-time line appear.
• Image zoom is decorative CSS only: hovering the card scales the cover via the shared group/blog10 hover state and shifts the title color to text-primary; there are no JavaScript callbacks or internal state in this block.