Skip to content
UI Kit
Accent color

Blog article components

The pieces inside an article. Tables of contents, pull quotes, callouts, related reading and the author box.

5 components · 20 variants
Switch category

Everything inside a long text

A long article lives from small pieces that help people find their way, pause and keep reading. The five components here sit inside or beside a text, follow its width and keep the reading order intact, so a guide stays clear on a phone and in a screen reader.

Table of contents comes as a sticky sidebar with a gliding marker, a contents box under the title, an edge minimap or chapter cards with minutes, all with scroll spy. Pull quote sets one sentence large, inset, centered, with a marker and copy button or beside a portrait. Callout carries notes in four tones, info, tip, warning and success, as a soft panel, a side line, a foldable note or a large panel with steps. Related content offers cards, a numbered list, one featured pick or previous and next. Author box shows who wrote it as an end card, a follow strip, a sticky sidebar card or a team.

A guide over 1500 words gains a lot from a table of contents, a short post reads best straight through. Use one pull quote per article and callouts where a reader should take something important along. Close with the author box and related content, that is where people decide to stay on the site.

On this page

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

author-box

Author box

Who wrote it and why they know. A card at the end, a strip with follow button, a sticky card beside the text or the team.

Props and details · Author box

End cardNew in 1.2

Portrait, bio, links and the way to every article, for the end of a text.

Follow stripNew in 1.2

A slim strip with a follow button that counts along and a bio that opens.

Sticky sidebarNew in 1.2

A card beside the text with portrait, credentials and a contact, above the text on phones.

TeamNew in 1.2

Everyone behind a piece and what each did, with a byline and stacked portraits.

callout

Callout

Notes in a text in four tones, information, tip, warning and success. As a soft panel, side line, foldable note or large panel.

Props and details · Callout

Soft panelNew in 1.2

A tinted panel with icon, title, text and a link, in the color of its tone.

Side lineNew in 1.2

A calm line in the tone color with a label, for texts with several notes.

Foldable noteNew in 1.2

A title that opens into the details, for asides that would interrupt the text.

pull-quote

Pull quote

One sentence from the text set large. Inset beside the paragraphs, centered, with a sweeping marker or beside a portrait.

Props and details · Pull quote

InsetNew in 1.2

Leans into the margin beside the paragraphs on wide screens, sits between them with a rule on phones.

CenteredNew in 1.2

Alone and large on a calm band, rising word by word under a drawn quotation mark.

With markerNew in 1.2

A marker sweeps over the key phrase as the quote scrolls in, with a button that copies the quote.

With portraitNew in 1.2

The speaker beside the quote, with name, role and where it was said.

related-content

Related content

What to read, watch or download next, with kinds and times. Cards, a numbered list, one large pick or previous and next.

Props and details · Related content

CardsNew in 1.2

Three cards with picture, kind and time, a sideways row with buttons on phones.

Numbered listNew in 1.2

A compact list in two columns with kind and time, for the end of an article.

Featured pickNew in 1.2

One large pick on its picture beside a short list with small pictures.

Previous and nextNew in 1.2

The previous and next piece as two large links, more on the topic below.

table-of-contents

Table of contents

Tables of contents with scroll spy for guides and articles. A sticky rail, a foldable box, an edge minimap and chapter cards.

Props and details · Table of contents

Sticky sidebarNew in 1.2

A rail beside the text with a gliding marker and a filling line, a bar that unfolds on phones.

Contents boxNew in 1.2

A numbered box under the title that folds, marks what was read and offers a way back.

Edge minimapNew in 1.2

Quiet ticks at the edge that open into titles on hover or focus, a progress button on phones.

Chapter cardsNew in 1.2

Chapters as cards with summary and minutes, marked as read while you scroll, with a resume link.

Similar components

More from Content, the same area of the kit.

Often combined with

Sections that usually sit next to Article elements on a page.

Often searched

Jump to

Copied to the clipboard