Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Magazine Editorial Features Block for React Aria

A product story set like a magazine feature: a headline, a drop-cap opening, two flowing columns with an inline bar-chart figure and its caption between the paragraphs, and a Key features aside in a card in card.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

An editorial feature section for React with React Aria, shown for Columnist, a publishing tool. A headline and a one-line standfirst open a long read: the first paragraph starts with a drop cap, set by our Drop Cap Text, and the body flows into two columns from sm with a hairline between them. Halfway down, an inline figure spans both columns: a small bar chart of how long a forty-page draft takes to open in each release, in a frame with + marks on its corners and a caption under it. Beside the story, a "Key features" aside is a card in card: a muted shell with + marks around a raised panel, with a badge, four features and a link. One column on a phone, with the aside under the story. It's built from Drop Cap Text, Badge and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For launch essays, founder notes, engineering write-ups and long-form announcements.

FAQ

How do I change the story?

Edit LEDE for the opening paragraph and BODY for the paragraphs before and after the figure; each is a plain array of strings, so the story can come from your CMS. The drop cap is the first letter of LEDE itself, so the text stays whole for screen readers, search and copying.

How is the figure made, and is it accessible?

The bars are plain HTML in a list: each release is a row with its name and its value in words ("300 ms"), so nothing depends on the drawing. The bars are decorative and hidden from screen readers, and the figure's caption says what is measured. Edit RELEASES; the bar widths and the highlighted fastest release come from the numbers.

How do the columns and the full-width figure work?

The body uses CSS multi-column layout from sm up, and the figure uses column-span: all, so the text above it balances into two columns, the figure runs across both, and the text below flows into two more. Below sm the container is one column and the figure simply sits between paragraphs.

Why is the aside a card in a card?

A raised panel inside a muted shell keeps it separate from the story in both a light and a dark theme without a coloured fill. It is a labelled aside landmark with its own heading, so a screen reader can jump to it or skip it, and its features are a real list.

What moves, and what happens with reduced motion?

The headline and the aside fade up once when the page loads, with a CSS transition, and the drop cap inks in from the top as the page loads. With reduced motion the transitions are off, the cap is simply there and the section appears at once.

How does it fit on a phone?

Everything stacks in one column: headline, story, the figure between its paragraphs, then the aside. The figure's rows keep their name, bar and value on one line down to 320 pixels, and nothing scrolls sideways.

All 170 features blocks