# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/block/blog63. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-08-12

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
1. /
2. [Blocks](/blocks)
3. /
4. [Blog](/blocks/blog)
5. /
6. Topic Hub Card With Resource List

# Topic Hub Card With Resource List[PRO](/pricing)

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.

ViewCodeDocs

Base UI

![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/blog63`

## 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.

Upgrade to Pro

Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.

[Upgrade NowUpgrade Now](/pricing)

### Installation

Swap `YOUR_EMAIL` and `YOUR_KEY` for the email and license key on your account. Find your license key on your [account page](/account).

**Radix flavor**

bashCopy

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

**Base UI flavor**

bashCopy

```
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.

tsxCopy

```
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:

tsxCopy

```
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

| Prop         | Type         | Default | Description                                                 |
| ------------ | ------------ | ------- | ----------------------------------------------------------- |
| heading      | string       | –       | Topic title inside the image panel                          |
| image        | PanelImage   | –       | Photo filling the panel, behind the scrim the title sits on |
| summaryLabel | string       | –       | Badge6 eyebrow above the summary column                     |
| description  | string       | –       | Summary paragraph for the topic                             |
| postsLabel   | string       | –       | Noun after the post count in the second Badge6 eyebrow      |
| posts        | PostLink\[\] | \[\]    | Posts in the topic, rendered as title-only links            |
| className    | string       | –       | Extra classes for the outer section                         |

tsCopy

```
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.

## More Blog blocks

[View all Blog](/blocks/blog)

[](/block/blog66)

PRO

blog66

### Topic Cards With Resource Counts

Three tinted topic cards, each stamped with how many pieces sit behind it, the topic name, and an image filling the lower half, alongside a link out to the full topic index.

[](/block/blog5)

PRO

blog5

### Horizontal List with Icons

Vertical stack of horizontal blog cards with left-aligned thumbnails. Features calendar and clock icons for metadata, author titles, and tag badges.

[](/block/blog59)

PRO

blog59

### Journal Card Trio

Three linked journal cards, each with a four-by-three image, a category, a display title, an excerpt and a ruled byline pinned to the bottom of the card so uneven excerpts still align.

[](/block/blog10)

PRO

blog10

### Alternating Feature Cards

Large alternating left-right blog cards with full article summaries. Image and content switch sides for visual variety. Read more buttons included.

[](/block/blog43)

PRO

blog43

### Editorial Article Grid

A blog listing with an eyebrow over a hairline rule, a two-column heading, and three linked article cards with a hover-zoom image, a category label, a title, an excerpt, and byline.

[](/block/blog48)

PRO

blog48

### Quad Grid

A newsroom listing with a square eyebrow, a two-column heading band over a hairline rule, and four equally weighted stories as bordered cards, each linking through a hover-zoom image, a category kicker, a bold headline, a summary, and a byline pinned to the card foot.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.