Email List

About this block

Email List is the classic mail triage pane, eight rows from the Acme inbox each carrying an avatar, sender name, subject, one-line snippet, and timestamp. Priya Nair's Q2 roadmap review sits selected at the top, bold text and a filled dot marking it unread, a paperclip indicating the attached deck. Starred rows get a filled star icon; everything else stays muted.

Emails are one typed array where every row shares the same keys including unread, starred, hasAttachment, and selected. The unread dot and bold treatment together give the eye two distinct signals for the same state.

When to use

Reach for this block as the message list column in a two or three pane mail layout, wired to your messages endpoint and current folder. Swap the data array for a search result or a filtered view and the visual logic stays intact.

A natural flow around it on an Application Pro page:

Before

• Inbox sidebar

After

• Email reader
• Thread collapsed

What you can display

One strong use is the primary inbox message list. Other email lists:

• Starred view. Filter to starred rows and show the same pane scoped to bookmarked threads.
• Search results. Replace the data with query hits and drop the unread distinction for a flat ranked list.
• Notifications digest. Swap email rows for in-app event rows using the same avatar and snippet shape.

Tip: the selected row uses bg-muted, not a brand color, so it stays readable in both light and dark themes without any adjustment.