Topic Hub Card With Resource ListPRO

Blog63: Topic Hub Card With Resource List

A topic hub card whose left third is a photo panel with the topic title set on a scrim over it, next to a two-column body: a short summary on one side and the posts belonging to the topic listed by title alone on the other.

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

Base UI flavor

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

This installs the block to components/beste/block/blog63.tsx and the badge6 component it uses for both eyebrows (installed to components/beste/component/badge6.tsx).

Quick start

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

import { Blog63, blog63Demo } from "@/components/beste/block/blog63";

export default function TopicPage() {
  return <Blog63 {...blog63Demo} />;
}

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

import { Blog63 } from "@/components/beste/block/blog63";

export default function TopicPage() {
  return (
    <Blog63
      heading="How we price the work"
      image={{ src: "/topics/pricing.jpg", alt: "Studio desk with a printed estimate" }}
      summaryLabel="Inside the series"
      description="Six pieces on quoting, scoping and saying no, and the numbers we put in front of a client before anyone signs."
      postsLabel="Chapters"
      posts={[
        { title: "The day we stopped billing hours", href: "/blog/no-more-hours" },
        { title: "What a flat price actually has to cover", href: "/blog/flat-price" },
        { title: "Reading a year of quotes back", href: "/blog/a-year-of-quotes" },
      ]}
    />
  );
}

Props

type PanelImage = {
  src: string;
  alt: string;
};

type PostLink = {
  title: string;
  href: string;
};

Behavior notes

• Both eyebrows are Badge6, which renders its label uppercase on its own, so pass summaryLabel and postsLabel in sentence case and let the component do the casing.
• The second eyebrow is composed, not literal: the block prints posts.length in front of postsLabel, so passing postsLabel="Chapters" with six posts renders "6 Chapters" and the count stays correct as the list changes.
• Posts carry a title and an href only. There is no date, excerpt, category, or thumbnail in the list, which is what keeps a six-item topic readable in a single column.
• The image covers the whole panel (absolute inset-0 plus object-cover) and a flat bg-foreground/60 scrim sits between it and the title, so the heading stays legible on any photo. The scrim is a semantic token, which means it inverts with the theme and keeps its contrast against text-background in both.
• The panel has no rounding of its own. The container's overflow-hidden clips it to the card's corners, so it reads as one third of a single box rather than a picture placed inside it.
• Because the image is absolutely positioned, the panel carries min-h-72 below md to give it a band height of its own. From md up it takes its height from the body column next to it.
• The layout is a single column below lg, where the panel stacks above the body and the body's own two columns split at md. Between md and lg the summary and the post list sit side by side under a full-width panel.
• Each post is a whole Link. The triangle marker is fixed at the top of the row (items-start plus a top margin), so titles that wrap to a second line keep their marker aligned with the first line instead of centering against the block of text.
• Hovering a post underlines the title and shifts it to the primary color through a named group/blog63, so the marker keeps its own color.