Lists

Lists present sets of related content in a vertical arrangement. Each row can contain leading visuals, primary and secondary text, and trailing actions or metadata.

Simple List

A basic list with title-only items and dividers.

  • Inbox

  • Starred

  • Sent

  • Drafts

With Leading Icons

Icons help users identify items at a glance. Use consistent icon sizing across the list.

  • Inbox

    24

  • Starred

    3

  • Sent

  • Drafts

    7

Two-Line Items

Add descriptions for supplementary information. Two-line items work well for people, files, and notifications.

  • Alice Chen

    Product Designer · Last active 2h ago

  • Marcus Wright

    Frontend Engineer · Last active 15m ago

  • Sarah Kim

    Backend Engineer · Last active 1d ago

With Trailing Actions

Place switches, buttons, or badges in the trailing slot for actionable list items.

  • Notifications

    Receive push and email alerts

  • Auto Updates

    Download and install automatically

File Browser

Lists adapt well to file and folder structures with a mix of content types.

  • Design Assets

    12 items · Updated 2h ago

  • Components

    8 items · Updated yesterday

  • hero-banner.png

    2.4 MB · PNG

  • README.md

    4.1 KB · Markdown