List

You might say

Just stack these items in a consistent list, one after another.

Show similar items one after anotherA list repeats the same structure for messages, articles, contacts, or other items that people scan from top to bottom. It is more flexible than a table and more compact than a grid of cards, so it works when column-by-column comparison is not important.

AC Alex left a review commentHomepage review · Just now

ML Maya invited you to a projectVibeHub website · 10 minutes ago

You can say this to an AI Agent

Change the notification center to a time-ordered vertical list. Each item should consistently show a title, a summary capped at two lines, a timestamp, and a View action. Test alignment, wrapping, and click targets with varied summary lengths.

When to use it

Messages and notifications
YA reviewer left a commentPublished
CA collaborator sent a project invitePublished
Search results
How to plan website content with AIAuthor, views, and reporting date
A guide to rolling out a design system
Contacts or members
Final homepage bannerSketch · 2.4 MBDownload
Icon library v3SVG · 856 KBDownload
A compact stream of similar content
Account & security›
Notifications›
Privacy settings›

When NOT to use it

Use it when several fields must line up for comparison
TasksStatus
Sign-in pageIn progress
Payment flowCompleted
Give every row a different structure
The images are all squashed into thin strips
Hide the boundary between items
LThe only record
A list structure isn’t necessary for a single record
Load an endless list without progress or a way back
1Enter information2Confirm order3Complete payment

Anatomy

Lin The commenter submitted a commentComment Summary · Published View ›

Several items with the same structure, arranged vertically

One item per row; the whole row is usually clickable

Optional; quickly identifies the source or type

Title and summary, which carry the main information

Time, status, or an action button

Variants

Basic

Account and securityPassword, linked phone number›

NotificationsPush, email›

When menus and settings pages need to display plain text entries

With Avatar

K User followed youPublish time

When the content is tied to a person and users need to identify the source

With Actions

Home Banner Final DraftSketch · 2.4 MB

When each record needs to be operated independently, such as downloading a file

Typical use cases

Inbox

Notifications

Alex left a review commentHomepage review · Just now

VibeHub v2.4.0 build completedDeployed to production · 1 hour ago

Search results

How to plan website content with AIIncludes sources and dates for all examples and metrics

From design system to production codeA practical guide to consistent components and handoff

Contact list

24 results

AI Components: A Beginner’s Visual GuideLearn one component at a time in about three minutes · Tutorial

Build an admin dashboard with an AI component libraryCreate consistent forms, tables, and workflows · Guide

Activity feed

Account

Account & security›

Notifications›

General

Privacy›

Recommended tool

Web fine-tuning tool · Selector Pro

Select page elements for precise AI edits

Click a button, text, or card, note the change, then copy its exact location to AI.

Open Selector Pro website

A notification center shows dozens of messages by time. Each has a title, summary, timestamp, and View action, with no need for column comparison. How should it be organized?

A. Use a vertical list with a consistent message structure ordered by timeB. Use four table columns for title, summary, time, and actionC. Use a multi-column card grid and add a cover image and large icon to every message