Horizontal List with Icons

Blog5: Horizontal List with Icons

A vertically stacked list of horizontal blog cards, each pairing a left thumbnail with a content column holding tag badges, a linked title, a two-line summary, an author avatar with name and title, and calendar/clock metadata icons, above an optional centered badge/heading/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/blog5?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/blog5.tsx, plus the badge and avatar shadcn/ui primitives it uses for the tag/section badges and the author avatar with initials fallback.

Quick start

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

import { Blog5, blog5Demo } from "@/components/beste/block/blog5";

export default function BlogPage() {
  return <Blog5 {...blog5Demo} />;
}

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

import { Blog5 } from "@/components/beste/block/blog5";

export default function BlogPage() {
  return (
    <Blog5
      badge={{ label: "Blog", variant: "default" }}
      heading="Recent Publications"
      description="Stay up to date with our latest articles."
      posts={[
        {
          image: { src: "/posts/design-systems.jpg", alt: "Design systems" },
          title: "The Future of Design Systems",
          summary: "How design systems evolve to meet complex web applications.",
          date: "January 15, 2026",
          readTime: "8 min read",
          author: {
            name: "Lisa Park",
            title: "Senior Developer",
            avatar: { src: "/authors/lisa.jpg", alt: "Lisa Park" },
          },
          tags: [{ label: "Design Systems", 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 (badge, heading, description) renders only when at least one of the three props is present, and each of the three is itself individually conditional.
• Cards are keyed by array index, so reordering or filtering posts without stable keys can cause React to reuse the wrong node.
• Every post link (thumbnail, title, and each tag) falls back to href="#" when its own href is omitted, so cards remain clickable but go nowhere unless you supply URLs.
• Tags are truncated with slice(0, 2): only the first two tags render, even if you pass more.
• The Author.href field exists in the type but is never used by the component; the author block is not wrapped in a link.
• When author.avatar is missing, the AvatarFallback shows initials derived from author.name by taking the first character of each space-separated word.
• The summary is clamped to two lines via line-clamp-2, and the thumbnail image scales to 105% on card hover through the group/blog5 hover group.