Blog components for lists and articles

Article lists, article headers and article text.

3 components · 16 variants

Switch category

From the post list to the comment

A blog needs three things that work together, a list that invites reading, an article that is pleasant to read and the parts around it. The Blog component covers the list and the article, Comments and Share cover what happens after the last paragraph.

Grid and Featured and list are the usual overview, Magazine fits a publication with many sections, List with dates suits a changelog or a news page. Article header and Article body set the post itself, with a table of contents for long reads and calm line lengths. Related row and Author card keep readers on the site, Comments shows threads with replies, and Share offers link, email, the device share sheet and a QR code.

Keep lines between 60 and 75 characters, the article body already does that. Give every post a real excerpt, it becomes the description in search results. Headings inside the article should form an outline, the table of contents is built from them.

On this page

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

Blog8
Comments4
Share4

blog

Blog

Post lists from grid to magazine, the article itself with a table of contents, related posts and the author.

Grid
Featured and list
List with dates
Magazine
Article header
Article body
Related row
Author card

Props and details

Grid

Six posts in three columns, the whole card is one link.

Installv1.0.1

aiw add @ai-website/blog

Brings along utils, kit, button, badge, icon, section, reveal

Usage

<Blog variant="grid" title="…" posts={posts} action={{ href: "/blog" }} />

Source

Featured and list

One large story, the latest posts beside it with small images.

Installv1.0.1

aiw add @ai-website/blog

Brings along utils, kit, button, badge, icon, section, reveal

Usage

<Blog variant="featured-list" title="…" posts={posts} />

Source

List with dates

An editorial index, the date leads each row.

Installv1.0.1

aiw add @ai-website/blog

Brings along utils, kit, button, badge, icon, section, reveal

Usage

<Blog variant="list-dated" title="…" posts={posts} />

Source

Magazine

A lead story, two side stories and a most read row, with category tabs.

Installv1.0.1

aiw add @ai-website/blog

Brings along utils, kit, button, badge, icon, section, reveal

Usage

<Blog variant="magazine" title="…" posts={posts} categories={[…]} />

Source

Article header

Title, lead, author, sharing and a wide cover image.

Installv1.0.1

aiw add @ai-website/blog

Brings along utils, kit, button, badge, icon, section, reveal

Usage

<Blog variant="article-header" article={article} />

Source

Article body

Readable prose with quote, list, note and figure. The table of contents follows along and folds up on phones.

Installv1.0.1

aiw add @ai-website/blog

Brings along utils, kit, button, badge, icon, section, reveal

Usage

<Blog variant="article-body" article={{ sections: [{ id, title, blocks }] }} />

Source

Related row

A row that scrolls by touch, arrows and keyboard, without a scrollbar.

Author card

Who wrote it, in a few sentences, with links and three more posts.

Installv1.0.1

aiw add @ai-website/blog

Brings along utils, kit, button, badge, icon, section, reveal

Usage

<Blog variant="author-card" author={author} posts={morePosts} />

Source

comments

Comments

Threads with replies, a form first layout, questions with answers and a compact summary. New comments appear in place.

Thread
Form first
Questions and answers
Compact

Props and details

Thread

Replies under their comment, the thread line draws in. Like with a small pop, reply inline without leaving the page.

Installv1.0.1

aiw add @ai-website/comments

Brings along utils, kit, button, icon, motion, section

Usage

<Comments variant="thread" comments={[{ id, author, when, text, replies }]} onSubmit={async (text, replyTo) => …} />

Source

Form first

The form stays on the left, the comments on the right sort by newest or most liked. A pinned note stays on top.

Installv1.0.1

aiw add @ai-website/comments

Brings along utils, kit, button, icon, motion, section

Usage

<Comments variant="with-form" title="…" comments={…} />

Source

Questions and answers

Questions with votes, the accepted answer marked green. Filter by answered and open, answer right in place.

Installv1.0.1

aiw add @ai-website/comments

Brings along utils, kit, button, icon, motion, section

Usage

<Comments variant="q-and-a" title="Questions about this bike" comments={[{ …, votes, replies: [{ …, accepted }] }]} />

Source

Compact

Reactions and who joined in, the comments open on demand. For the end of an article.

Installv1.0.1

aiw add @ai-website/comments

Brings along utils, kit, button, icon, motion, section

Usage

<Comments variant="compact" reactions={[{ icon, label, count }]} people={[…]} comments={…} />

Source

share

Share a page by link, email, message, the device share sheet or a QR code. No foreign logos, your own channels as URL templates.

Inline row
Side rail
Article end
Share a quote

Props and details

Inline row

Round buttons under the article header, a tooltip rises on hover. Copy confirms with a check, the QR code opens in place.

Side rail

A rail next to the text with a ring that fills while reading. On phones and tablets the same ways sit at the end of the article.

Article end

The author with a short bio, the ways to share and a quick question whether the article helped.

Share a quote

Select a sentence and a small bar offers to share or copy it. Pull quotes carry the same two actions for touch and keyboard.

Installv1.0.1

aiw add @ai-website/share

Brings along utils, kit, button, icon, reveal, motion, section, graphics

Usage

<Share variant="quote-select" heading="…" paragraphs={[…]} quotes={[…]} />

Source

Similar components

More from Content, the same area of the kit.

Often combined with

Sections that usually sit next to Blog on a page.

Copied to the clipboard