Component reference

List

Material 3 Expressive List components for displaying collections of items with leading and trailing content.

Material 3Web ComponentFramework agnostic

Simple List

Item One

Item Two

Item Three

<m3-list>
  <m3-list-item>Item One</m3-list-item>
  <m3-list-item>Item Two</m3-list-item>
  <m3-list-item>Item Three</m3-list-item>
</m3-list>

Staggered Entrance

Animated 1

Animated 2

Animated 3

Animated 4

<m3-list staggered>
  <m3-list-item>Item 1</m3-list-item>
  <m3-list-item>Item 2</m3-list-item>
  <m3-list-item>Item 3</m3-list-item>
</m3-list>

Two-Line with Leading Icon

person Alice Smith Software Engineer

person Bob Jones Product Designer

person Carol White Engineering Manager

<m3-list>
  <m3-list-item lines="2">
    <span slot="leading" class="material-symbols-outlined">person</span>
    Alice Smith
    <span slot="supporting-text">Software Engineer</span>
  </m3-list-item>
  <m3-list-item lines="2">
    <span slot="leading" class="material-symbols-outlined">person</span>
    Bob Jones
    <span slot="supporting-text">Product Designer</span>
  </m3-list-item>
</m3-list>

Selected State

Selected Item

Normal Item

<m3-list>
  <m3-list-item selected>Selected Item</m3-list-item>
  <m3-list-item>Normal Item</m3-list-item>
</m3-list>

Rounded Shape

Rounded Item 1

Rounded Item 2

Rounded Item 3

<m3-list>
  <m3-list-item shape="rounded">Rounded 1</m3-list-item>
  <m3-list-item shape="rounded">Rounded 2</m3-list-item>
</m3-list>