---
title: "Article header"
description: "The top of an article: breadcrumb, title, one-line summary, author row with share buttons, and a full-width cover photo."
plan: Pro
docs: https://ui.edbn.me/docs/blocks/article-header
---

# Article header

The top of an article: breadcrumb, title, one-line summary, author row with share buttons, and a full-width cover photo.

A breadcrumb leads back to the journal and the post's category, over the page's one h1, a sentence on what the article is for, and the author's initials, name, role, date and reading time. Share buttons copy the link (the icon turns to a check and the tooltip reads Link copied, announced to screen readers), send it by email, and open the device's own share sheet where the browser has one. The cover photo runs the full page width under the header at 2:1, and 3:2 on phones; it loads straight away as the page's first image.

A Pro block built on Base UI and Tailwind CSS v4.

## Installation

This is a Pro item. Once per project, create a token at https://ui.edbn.me/dashboard/tokens, put it in `.env.local` as `EDBN_TOKEN`, and add the registry to `components.json`:

```json
{
  "registries": {
    "@edbn": {
      "url": "https://ui.edbn.me/r/{name}.json",
      "headers": { "Authorization": "Bearer ${EDBN_TOKEN}" }
    }
  }
}
```

Then install:

```bash
npx shadcn@4.19.0 add @edbn/article-header
```

## Dependencies
- npm: lucide-react@^1.33.0
- edbn: edbn-base, aspect-ratio, avatar, breadcrumb, button, tooltip

## Source

The source is part of Pro (https://ui.edbn.me/pricing). The install above adds it to the project, ready to edit.

## More blog blocks

All 4, with install commands: https://ui.edbn.me/docs/blocks/blog (Markdown: https://ui.edbn.me/docs/blocks/blog.md)

## For agents
- Base theme, once per project: npx shadcn@4.19.0 add https://ui.edbn.me/r/edbn-base.json
- MCP server with search, items, examples and source: https://ui.edbn.me/mcp
- Every page and item: https://ui.edbn.me/llms.txt