# Press stack

A shadcn/ui editorial section for press coverage: magazine and newspaper features stack as you scroll, and each opens into more of the article.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available for the docs, pricing and about pages: append `.md` to the URL or send an `Accept: text/markdown` header (the home page answers the header too). An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).

## At a glance

- **Good for:** Press and media pages; 'As featured in' strips on company and about pages; Studios, agencies and brands with magazine coverage
- **Category:** Marketing, Company · **Type:** Editorial · **Style:** Motion, Minimal, Dark mode
- **See it:** [Live preview](https://www.craftui.space/docs/templates/editorial-section) · [Video](https://pub-52b0d9cec7c64f638ba3f33a29718fa6.r2.dev/Videos_product_cards/editorial-press-stack.e6d3a89b.mp4)

## Install

```bash
pnpm dlx shadcn@latest add https://www.craftui.space/r/editorial-section.json
```

This is a paid item (SEC-0015): the install needs a craftUI plan or a purchase of it. Signed in, the docs page gives your personal install command. Plans: https://www.craftui.space/pricing

## Usage

```tsx
import EditorialSection from "@/components/blocks/editorial-section";

export default function Page() {
  return <EditorialSection />;
}
```

With no props it renders with demo content; pass your own through the props below.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `heading` | `ReactNode` | `"As featured in"` | The headline above the cards. |
| `features` | `EditorialSectionFeature[]` | `built-in demo content` | The press features, newest first. Each is a card; clicking one opens it. Defaults to `pressFeatures`, the exported demo set. |
| `locale` | `string` | `"en-US"` | Locale for the dates ("en-GB" gives "18 September 2026"). |
| `readLabel` | `string` | `"Read more"` | Shown on every card, at the end of the row with its date. |
| `closeLabel` | `string` | `"Close"` | Screen-reader name of the open feature's close button. |
| `linkLabel` | `string` | `"Read the article"` | The open feature's button to its `href`, when it has one. |
| `scroller` | `RefObject<HTMLElement \| null>` | — | The element that scrolls, when it isn't the page (a custom scroll container, a smooth-scroll wrapper). The stage is then as tall as it. |
| `headingLevel` | `1 \| 2 \| 3` | `2` | 1 when this is the page's main heading; 2 when the page has its own h1. |

It also accepts every `<section>` attribute (`className`, `id`, `aria-*` and so on).

### `EditorialSectionFeature`

| Field | Type | Description |
| --- | --- | --- |
| `id` (required) | `string` | Unique id: the deck keys on it, and it names the open card's labels. |
| `publication` (required) | `string` | The newspaper or magazine that ran it ("The Material Review"). |
| `kind` | `string` | What kind of piece it is ("Interview"): beside the date, or the publication on phones. |
| `headline` (required) | `string` | The article's headline. Keep it to about three lines on the card. |
| `excerpt` (required) | `string` | One or two sentences under the headline: what the piece says about you. The card shows up to five lines. |
| `date` (required) | `string` | Publication date, as an ISO date ("2026-09-18"). |
| `body` (required) | `string[]` | The open card's paragraphs: more of what the article says. |
| `href` | `string` | The article on the publication's site. When set, the open card ends with a button to it. |

## Files

The install adds:

- `components/blocks/editorial-section.tsx`

npm dependencies (installed for you): `motion`.

shadcn/ui components it uses (the shadcn CLI adds any that are missing): `button`, `card`.