Design System/Application UI/Lists

Lists

Tables, stacked lists, grid lists, and activity feeds.

Data · 34 variants

How To Use This Page

Lists sits inside the Application UI part of the catalog and collects reusable examples that solve the same job in different ways.

This page currently groups 4 examples so you can compare structure, emphasis, and density before choosing an implementation direction.

How The Content Is Grouped

  • The examples are grouped as a single Application UI reference page so you can compare variations without leaving the route.
  • Use the jump links to move straight to the most relevant example once you know which structure, layout, or emphasis pattern you need.

Start With

Simple

A basic data table with a single text action per row.

Two Column With Avatar

List rows with identity on the left and metadata aligned to the right.

Simple Cards

Three-up cards for people, teams, or contacts.

Stacked With Avatars

A lightweight activity feed with avatar markers and connector lines.

Tables

Simple

A basic data table with a single text action per row.

NameTitleEmailRole
Lindsay WaltonFront-end Developerlindsay.walton@example.comEngineeringEdit
Courtney HenryDesignercourtney.henry@example.comDesignEdit
Tom CookDirector of Producttom.cook@example.comProductEdit
Whitney FrancisCopywriterwhitney.francis@example.comMarketingEdit
Leonard KrasnerSenior Designerleonard.krasner@example.comDesignEdit
NameTitleEmail
Lindsay WaltonFront-end Developerlindsay.walton@example.comEdit
Courtney HenryDesignercourtney.henry@example.comEdit
Tom CookDirector of Producttom.cook@example.comEdit
Whitney FrancisCopywriterwhitney.francis@example.comEdit
Leonard KrasnerSenior Designerleonard.krasner@example.comEdit
PersonTitleStatus
LW

Lindsay Walton

lindsay.walton@example.com

Front-end Developer

Engineering

Active
CH

Courtney Henry

courtney.henry@example.com

Designer

Design

Reviewing
TC

Tom Cook

tom.cook@example.com

Director of Product

Product

Offline
WF

Whitney Francis

whitney.francis@example.com

Copywriter

Marketing

Scheduled
LK

Leonard Krasner

leonard.krasner@example.com

Senior Designer

Design

Active
NameDepartmentEmailRole
Lindsay WaltonEngineeringlindsay.walton@example.comFront-end Developer
Courtney HenryDesigncourtney.henry@example.comDesigner
Tom CookProducttom.cook@example.comDirector of Product
Whitney FrancisMarketingwhitney.francis@example.comCopywriter
Leonard KrasnerDesignleonard.krasner@example.comSenior Designer
Department
Lindsay WaltonFront-end Developerlindsay.walton@example.comEngineering
Courtney HenryDesignercourtney.henry@example.comDesign
Tom CookDirector of Producttom.cook@example.comProduct
Whitney FrancisCopywriterwhitney.francis@example.comMarketing
Leonard KrasnerSenior Designerleonard.krasner@example.comDesign
NameTitleEmailDept
Lindsay WaltonFront-end Developerlindsay.walton+0@example.comEngineering
Courtney HenryDesignercourtney.henry+1@example.comDesign
Tom CookDirector of Producttom.cook+2@example.comProduct
Whitney FrancisCopywriterwhitney.francis+3@example.comMarketing
Leonard KrasnerSenior Designerleonard.krasner+4@example.comDesign
Lindsay WaltonFront-end Developerlindsay.walton+5@example.comEngineering
Courtney HenryDesignercourtney.henry+6@example.comDesign
Tom CookDirector of Producttom.cook+7@example.comProduct
Whitney FrancisCopywriterwhitney.francis+8@example.comMarketing
Leonard KrasnerSenior Designerleonard.krasner+9@example.comDesign
Lindsay WaltonFront-end Developerlindsay.walton+10@example.comEngineering
Courtney HenryDesignercourtney.henry+11@example.comDesign
Tom CookDirector of Producttom.cook+12@example.comProduct
Whitney FrancisCopywriterwhitney.francis+13@example.comMarketing
Leonard KrasnerSenior Designerleonard.krasner+14@example.comDesign

Stacked Lists

Two Column With Avatar

List rows with identity on the left and metadata aligned to the right.

  • LW

    Lindsay Walton

    Front-end Developer

    lindsay.walton@example.com

    Engineering
  • CH

    Courtney Henry

    Designer

    courtney.henry@example.com

    Design
  • TC

    Tom Cook

    Director of Product

    tom.cook@example.com

    Product
  • WF

    Whitney Francis

    Copywriter

    whitney.francis@example.com

    Marketing
  • LK

    Leonard Krasner

    Senior Designer

    leonard.krasner@example.com

    Design
  • LW

    Lindsay Walton

    Shared the updated component inventory and flagged three states that still need responsive QA before launch.

    Apr 12

  • CH

    Courtney Henry

    Posted a fresh set of motion studies for the dashboard drawer, including a calmer exit transition for dense views.

    Apr 11

  • TC

    Tom Cook

    Outlined the next sprint priorities with a focus on reducing friction in setup, billing, and enterprise handoff moments.

    Apr 10

  • WF

    Whitney Francis

    Drafted a shorter onboarding sequence with clearer status messaging and fewer interruptions during first-run setup.

    Apr 9

Today
  • LW

    Lindsay Walton

    Front-end Developer · Engineering

  • TC

    Tom Cook

    Director of Product · Product

Yesterday
  • CH

    Courtney Henry

    Designer · Design

  • LK

    Leonard Krasner

    Senior Designer · Design

This week
  • WF

    Whitney Francis

    Copywriter · Marketing

  • LW

    Dashboard refresh

    Lindsay Walton

    CHTCLK
  • WF

    Pricing narrative

    Whitney Francis

    LWTC
  • LK

    Motion audit

    Leonard Krasner

    CHWFLW

Grid Lists

Simple Cards

Three-up cards for people, teams, or contacts.

  • Lindsay Walton

    Front-end Developer

    Core team

    lindsay.walton@example.com

  • Courtney Henry

    Designer

    Design lead

    courtney.henry@example.com

  • Tom Cook

    Director of Product

    Product owner

    tom.cook@example.com

  • LW

    Lindsay Walton

    Front-end Developer

    lindsay.walton@example.com

  • CH

    Courtney Henry

    Designer

    courtney.henry@example.com

  • TC

    Tom Cook

    Director of Product

    tom.cook@example.com

CH

Customer handoff list

Open tasks, owners, and launch blockers for the Q2 rollout.

CR

Creative review queue

Landing pages, product cards, and campaign assets awaiting sign-off.

OP

Ops escalation board

Support issues grouped by response urgency and team coverage.

Feeds

Stacked With Avatars

A lightweight activity feed with avatar markers and connector lines.

  • EB

    Eduardo Benz

    6d ago

    Called client, they said they would hold off until procurement signs the revised scope.

  • HM

    Hilary Mahy

    2d ago

    Assigned to you by Jason Meyers

  • KW

    Kristin Watson

    1d ago

    Added tag Closing to this ticket

  • ES

    Emily Selman

    2h ago

    Sent them an email, waiting for response.

  • Eduardo Benz

    •

    6d ago

    Called client, they said they would hold off until procurement signs the revised scope.

  • Hilary Mahy

    •

    2d ago

    Assigned to you by Jason Meyers

  • Kristin Watson

    •

    1d ago

    Added tag Closing to this ticket

  • Emily Selman

    •

    2h ago

    Sent them an email, waiting for response.