# Article Detail block

> Blog post detail page with gradient overlay image hero, byline, pull quote, and related posts list

Reading page for one blog post, news, changelog, or case study. Cover with gradient scrim, overlaid title and category badge, byline, sections, pull quote, author bio, and text-only related posts. Uses shadcn Card, AspectRatio, Avatar, Badge, Item.

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

## Best for

A post with its title overlaid on the cover image, a bordered pull quote and divided text rows of related posts

## Agent notes

- `ARTICLE` in data.ts holds the whole post: `sections`, `pullQuote`, `topics` and the author `bio`; replace it with your CMS post
- `KEEP_READING` feeds the related rows; its 2 entries are samples and each row links to a placeholder `href`
- `topics` render as plain `Badge` chips, not links; wrap them if you have topic archive pages

## When not to use

- A post with the title above the cover and cards for the next reads: use [Read Next Post](https://web.dev.reui.io/blocks/marketing/blog/blog-6.md) (`get_block("blog-6")`)
- Dashboard rows of figures with trend badges and no article body: use the [List blocks](https://web.dev.reui.io/blocks/application/list.md)

## Install

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

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