Anatomy of an Email Client
Nearly every email client converges on the same three-pane anatomy (folders, a message list, and a reading pane) because it lets you triage a full inbox without ever leaving the screen.
Every part of the example below is labelled and explained. This page is one of 55 annotated tours on AnatomyOf, a free, open-source project by LunarWerx Studios .
What is inside an Email Client page
Toolbar The top bar of actions for the current message or selection.
The toolbar exposes the verbs of email (archive, delete, reply, mark-as-read) plus global search. It acts on whatever is selected, so its buttons enable and disable as the selection changes. Keeping destructive actions (delete) slightly apart from everyday ones (archive) reduces misclicks, and the most common action, search, usually gets the most prominent slot.
Search Finds messages across every folder.
Because inboxes grow without bound, search is often the primary way people actually find mail: by sender, subject, date, or full text. It typically spans all folders, not just the one in view. Strong mail search supports operators (from:, has:attachment, before:) and instant results as you type, turning "where did that thread go" into a one-second lookup.
Folder list The sidebar of mailboxes and labels, with unread counts.
The left column lists mailboxes (Inbox, Starred, Sent, Drafts) and any custom folders or labels, each showing an unread count so attention goes where it is needed. Selecting one scopes the message list beside it. Inbox sits at the top because it is where triage happens. Some clients use foldering (a message lives in one place) and others labels (a message can carry many), but the navigational role is the same.
Compose button Starts a brand-new message.
Compose is the client’s primary creative action, so it gets a high-emphasis, always-visible button (often the only filled/colored one in the sidebar), the email equivalent of a dashboard’s "New" or a mobile app’s FAB. It is deliberately separate from Reply and Forward, which act on an existing message; Compose always starts from a blank slate.
Message list The scrollable column of messages in the current folder.
The middle column lists the selected folder’s messages, newest first, each a compact preview: sender, subject, a snippet, and a timestamp. It is the triage surface where users scan, select, and bulk-act. Unread messages are visually stronger (bold), the selected one is highlighted, and threaded clients collapse a back-and-forth conversation into a single expandable row to keep the list short.
Message item A single email’s preview row in the list.
Each row condenses a message into a scannable summary (who it is from, the subject, a one-line snippet, and when it arrived) so users can judge relevance without opening it. Bold text marks unread; a colored accent marks the currently open one. Rows are gesture-rich: swipe to archive, hover for quick actions, click to open in the reading pane. The snippet in particular saves countless unnecessary opens.
Reading pane The panel that shows the selected message in full.
The reading pane renders the open message (subject, sender identity, full body, and attachments) beside the list, so users can move through their inbox without navigating away and back. It is why the three-pane layout is so fast to triage in. It reveals sender details and security cues (is this really from your bank?), renders the HTML body safely (blocking remote images by default), and anchors the reply actions at the bottom.
Attachment A file carried along with the message.
Attachments appear as chips showing the file name, type icon, and size, with actions to preview or download. Surfacing them clearly matters. A missed attachment is a classic email mistake ("oops, forgot to attach the file"). Clients preview common types inline (PDFs, images), scan for malware, and warn on risky executables, since attachments are a favourite vector for phishing and malware.
Reply actions Reply, Reply All, and Forward for the open message.
The reply bar turns a received message into the start of the next one: Reply (to the sender), Reply All (to everyone), and Forward (to someone new). They pre-fill recipients and quote the original thread so context carries forward. Reply All deserves respect (it is the source of countless "please stop replying all" storms) so many clients make plain Reply the default and set Reply All slightly apart.
Official Email Client site · All languages on AnatomyOf
Every language on AnatomyOf
Concept tours
The interactive tour needs JavaScript. Enable it to hover a callout and trace it into the code.