# Cover Story Cards block

> Full-image blog post cards with titles overlaid on covers, hover zoom, and pill category badges

Blog index of three full-bleed cover-image cards with a gradient scrim, title and tone label overlaid on the photo, a white pill category Badge, and hover zoom. ReUI Badge, shadcn Card. For articles index, news grid, insights, or journal pages.

- Type: Pro block
- Category: [Blog](https://web.dev.reui.io/blocks/marketing/blog.md)
- Page: https://web.dev.reui.io/blocks/marketing/blog/blog-2
- MCP: `get_block("blog-2")`
- Built with: Badge, Card
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

Tall photo tiles that are one link each, with a white category pill on top and the title over a dark scrim

## Agent notes

- `BLOG_POSTS` holds 3 sample posts with a `category`, a `tone` label and an Unsplash `COVER` image, and no excerpt, date or author
- `BlogCategory` is a closed union of 3 labels; widen it or type `category` as a string when your categories differ
- Each tile is one overlay `a` link above the content, so the category `Badge` in `PostCard` is not separately clickable

## When not to use

- Posts that need an excerpt, a date and an author under the cover: use [Blog Index Grid](https://web.dev.reui.io/blocks/marketing/blog/blog-1.md) (`get_block("blog-1")`)
- Image tiles that open a shop department rather than an article: use the [Category Card blocks](https://web.dev.reui.io/blocks/ecommerce/category-card.md)

## Install

```bash
npx shadcn@latest add @reui/blog-2
```

## About Blog blocks

### When to use

- A blog, news or insights index of post cards with cover images, in a grid or a carousel
- A single article reading page with a byline, body sections, topic tags and related posts

### When not to use

- Dashboard tiles for KPIs, profiles or setup guides, with no article to read: use the [Card blocks](https://web.dev.reui.io/blocks/application/card.md)
- A dashboard side panel of figures, transactions or integrations, one record per row: use the [List blocks](https://web.dev.reui.io/blocks/application/list.md)
- Photo tiles that send shoppers into a store department or collection: use the [Category Card blocks](https://web.dev.reui.io/blocks/ecommerce/category-card.md)

### Agent notes

- Every root component takes no props and renders `BLOG_POSTS` or `ARTICLE` from components/data.ts; add a prop to pass in posts from your CMS
- Every link is a hash `href` placeholder and every cover `img` loads an Unsplash demo image; swap in your post routes and covers
- Each page.tsx wraps the block in a padded `min-h-svh` container; remove it when the block renders inside your site layout

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.