# Resource Hub Cards block

> Icon-badge resource card grid linking to help, docs, and platform sections

Responsive grid of clickable resource cards, each with an icon badge, title link, and short blurb. Built on ReUI Frame and FramePanel with shadcn Item and ItemMedia. For docs hubs, help centers, onboarding, and platform overview sections.

- Type: Pro block
- Category: [Card](https://web.dev.reui.io/blocks/application/card.md)
- Page: https://web.dev.reui.io/blocks/application/card/card-39
- MCP: `get_block("card-39")`
- Built with: Frame, Item
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

Resource hub cards with a muted icon box, a linked title and a full sentence summary on onboarding, security and support

## Agent notes

- Replace the 4 `CARDS` in data.tsx; each `description` shows in full with no line clamp, so long copy stretches its whole row
- Each resource title in `CardItem` is an anchor whose `href` is #, so point it at the guide, policy or help page it names

## When not to use

- Help topics that each list 2 guide links under the summary: use [Help Center Guides](https://web.dev.reui.io/blocks/application/card/card-20.md) (`get_block("card-20")`)
- Short topic shortcuts with a solid colored icon and a one line summary: use [Topic Shortcuts](https://web.dev.reui.io/blocks/application/card/card-41.md) (`get_block("card-41")`)

## Install

```bash
npx shadcn@latest add @reui/card-39
```

## About Card blocks

### When to use

- Rows and grids of KPI tiles, each a value and a label with an optional trend badge or icon
- Grids of small linked cards for features, setup steps, guides, integrations or partner logos
- One record or offer per card: a profile, applicant, delivery, meeting, job, asset price or promo

### When not to use

- A metric panel with a progress bar, a segmented gauge or supporting rows under the total: use the [Stats blocks](https://web.dev.reui.io/blocks/application/stats.md)
- A KPI whose trend over time is plotted, with a period switcher or tooltips: use the [Area Chart blocks](https://web.dev.reui.io/blocks/chart/area-chart.md)
- A whole overview page: a header, a row of KPI tiles, then a work list or trend panel: use the [Dashboard blocks](https://web.dev.reui.io/blocks/application/dashboard.md)

### Agent notes

- Every block centers itself in a padded `min-h-svh` wrapper in page.tsx or its root component; remove it when the card goes inside your own page

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.