# Blog cards (goodtabs UI)

A grid of post cards with an image, tag, title, excerpt and a mono meta line.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/blog-cards.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/blog-cards`

## Usage

```tsx
import { BlogCards } from "@/components/blog-cards"

<BlogCards posts={[{ title: "Why our focus ring is two pixels", excerpt: "A look at thin rings on dark surfaces.", image: "/images/ring.jpg", href: "/blog/focus-ring", meta: "5 Nov, 4 min", tag: "Design" }]} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| posts | `{ title; excerpt; image; href; meta; tag? }[]` |  | The posts. Images are decorative and the title is the link. |
| columns | `2 | 3` | `3` | Maximum columns. Fewer on narrow containers. |

## When to use

- The latest posts block on a landing page
- A blog index with an image per post
- A changelog or case study teaser row

## When not to use

- Dense text lists, which want a table or plain rows
- Image-only collections, which want the gallery section
- Product cards with prices

## Notes for agents

- Server component; uses a plain img and an a so it has no router dependency, swap in next/image or next/link if you want them
- The title link is stretched over the card with an after pseudo-element, so keep one link per card
- Images use aspect-3/2 with object-cover, so any source ratio works
- Excerpt is clamped to two lines

Docs: https://ui.goodtabs.co/components/blog-cards