Skip to content
UI Kit
Accent color

Editorial

Magazine fronts, listicles and reviews, set for reading.

3 components · 15 variants
Switch category

On this page

Every component of this category. Pick one to jump to its variants.

listicle

Listicle

Lists that are the article. Large numbers with pictures that alternate, a ranking with scores and movement, a dense list with a contents bar, a carousel to swipe and places on a drawn map.

Props and details · Listicle

Numbered

Large numbers, the picture changes sides and drifts while scrolling, facts and a tip under each item.

Open in Studio

Ranking

Places with a score bar that fills once the list scrolls in, and the movement since the last edition.

Open in Studio

Compact with contents

A dense list for many items. The numbered bar sticks, jumps and marks how far you have read.

Open in Studio

With map

The places of the list on a drawn map with the route between them. The stop being read lights up on both, a pin jumps to its place.

Open in Studio

magazine-front

Magazine front

The front of a magazine or news site, sorted like an editor would. Lead story, sections with a bar that follows, a print issue with contents, a morning digest to tick off and the most read by period.

Props and details · Magazine front

Cover story

One lead story with a large picture that drifts while scrolling, three side stories and a row of short ones.

Open in Studio

Sections

The front by section. The section bar sticks and its line glides to the section being read, the lead changes sides from section to section.

Open in Studio

Print issue

The cover with masthead and cover lines next to the contents. A story in the contents lights up its line on the cover.

Open in Studio

Morning digest

A handful of stories to tick off, a ring counts what is read. Each story opens a short why it matters.

Open in Studio

Most read

Ranks by period with a gliding switch. A bar under each story fills to its reads once the list scrolls in.

Open in Studio

review-article

Review

Reviews written so a reader can decide. The verdict with score ring and pros and cons, the scores with weights to adjust, the data sheet promised against measured, the winners of a comparison and the long test as a diary.

Props and details · Review

Verdict

The result first. A ring fills to the score, the verdict in one sentence, pros and cons, who should buy it and who should skip it.

Open in Studio

Scores with weights

The score per criterion, bars fill as they scroll in. Readers move the weights to their own priorities, the ring follows and one press goes back.

Open in Studio

Data sheet

What the maker promises next to what we measured, each value marked better, below or as promised. A switch shows only the deviations.

Open in Studio

Comparison winners

The winners of a comparison test as cards, each with its award, score, two facts and price. The overall winner carries a light that circles.

Open in Studio

Long-term test

The long test as a diary. A line draws the score over the months once it scrolls in, each entry with distance, score and what happened.

Open in Studio

Similar components

More from Content, the same area of the kit.

Often combined with

Sections that usually sit next to Editorial on a page.

Often searched

Jump to

Copied to the clipboard