# News & Insights block

> Three-column blog index with stacked Frame cards, grayscale hover-zoom covers, and author footers

Blog index listing posts as stacked ReUI Frame cards in a three-column row: grayscale cover that zooms on hover, category, date, title, excerpt, and an author footer with shadcn Avatar and Read link. For news, insights, and article listings.

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

## Best for

Stacked Frame panels with grayscale covers that zoom on hover, a linked category beside the date and an author footer

## Agent notes

- `BLOG_POSTS` holds 3 sample posts, each with an `AUTHORS` entry and a plain string `category` and `date`; map your CMS fields onto them
- Covers render with the `grayscale` class in `PostFrame`; remove it to show full-color images
- The `category` text in `PostFrame` is its own link beside the date, with a placeholder `href` to point at your category page

## When not to use

- Shop tiles with a photo panel above the price and color swatches: use [Stacked Panel Grid](https://web.dev.reui.io/blocks/ecommerce/product-grid/product-grid-2.md) (`get_block("product-grid-2")`)
- Plain Card tiles that show the read time next to the date: use [Blog Index Grid](https://web.dev.reui.io/blocks/marketing/blog/blog-1.md) (`get_block("blog-1")`)

## Install

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

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