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

When to use it

Messages and notifications
Search results
Contacts or members
A compact stream of similar content

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
Hide the boundary between items
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›