Component

Material Design 3 list item list tokens

Browse tokens

Token

See more values

Compare token values by selecting another context

More contexts
Platform
Audience
What do 1P and 3P mean?

1P means first-party; 3P means third-party. We interpret 1P Baseline as the configuration for Google's own products, and 3P as the configuration for other developers.

Material supplies these audience labels but does not define them in the captured data. They are not a baseline-versus-Expressive switch.

Font

Enabled
Enabled tokens
TokenValue
List list item between spacemd.comp.list.list-item.between-space
md.sys.measurement.space150Show reference chainHide reference chain
md.comp.list.list-item.between-space
  • md.sys.measurement.space150
12dp
List list item bottom spacemd.comp.list.list-item.bottom-space
md.sys.measurement.space125Show reference chainHide reference chain
md.comp.list.list-item.bottom-space
  • md.sys.measurement.space125
10dp
List list item container shapemd.comp.list.list-item.container.shape
md.sys.shape.corner.noneShow reference chainHide reference chain
md.comp.list.list-item.container.shape
  • md.sys.shape.corner.none
Rounded Corners · DefaultSize: No value specified (dp)
List list item leading avatar shapemd.comp.list.list-item.leading-avatar.shape
md.sys.shape.corner.fullShow reference chainHide reference chain
md.comp.list.list-item.leading-avatar.shape
  • md.sys.shape.corner.full
Circular
List list item leading image shapemd.comp.list.list-item.leading-image.shape
md.sys.shape.corner.noneShow reference chainHide reference chain
md.comp.list.list-item.leading-image.shape
  • md.sys.shape.corner.none
Rounded Corners · DefaultSize: No value specified (dp)
List list item leading spacemd.comp.list.list-item.leading-space
md.sys.measurement.space200Show reference chainHide reference chain
md.comp.list.list-item.leading-space
  • md.sys.measurement.space200
16dp
List list item leading video shapemd.comp.list.list-item.leading-video.shape
md.sys.shape.corner.smallShow reference chainHide reference chain
md.comp.list.list-item.leading-video.shape
  • md.sys.shape.corner.small
Rounded Corners · DefaultSize: 8dp
List list item top spacemd.comp.list.list-item.top-space
md.sys.measurement.space125Show reference chainHide reference chain
md.comp.list.list-item.top-space
  • md.sys.measurement.space125
10dp
List list item trailing spacemd.comp.list.list-item.trailing-space
md.sys.measurement.space200Show reference chainHide reference chain
md.comp.list.list-item.trailing-space
  • md.sys.measurement.space200
16dp
Container
Container tokens
TokenValue
List list item container expressive shapemd.comp.list.list-item.container.expressive.shape
md.sys.shape.corner.extra-smallShow reference chainHide reference chain
md.comp.list.list-item.container.expressive.shape
  • md.sys.shape.corner.extra-small
Rounded Corners · DefaultSize: 4dp
List list item container heightmd.comp.list.list-item.container.height56dp
Label Text
Label Text tokens
TokenValue
List list item label text fontmd.comp.list.list-item.label-text.font
md.sys.typescale.body-large.fontShow reference chainHide reference chain
md.comp.list.list-item.label-text.font
  • md.sys.typescale.body-large.font
    • md.ref.typeface.plain
Roboto
List list item label text line heightmd.comp.list.list-item.label-text.line-height
md.sys.typescale.body-large.line-heightShow reference chainHide reference chain
md.comp.list.list-item.label-text.line-height
  • md.sys.typescale.body-large.line-height
24pt
List list item label text sizemd.comp.list.list-item.label-text.size
md.sys.typescale.body-large.sizeShow reference chainHide reference chain
md.comp.list.list-item.label-text.size
  • md.sys.typescale.body-large.size
16pt
List list item label text trackingmd.comp.list.list-item.label-text.tracking
md.sys.typescale.body-large.trackingShow reference chainHide reference chain
md.comp.list.list-item.label-text.tracking
  • md.sys.typescale.body-large.tracking
0.5pt
List list item label text typemd.comp.list.list-item.label-text.type
md.comp.list.list-item.label-text.fontmd.comp.list.list-item.label-text.weightmd.comp.list.list-item.label-text.sizemd.comp.list.list-item.label-text.line-heightmd.comp.list.list-item.label-text.trackingShow reference chainHide reference chain
md.comp.list.list-item.label-text.type
  • md.comp.list.list-item.label-text.font
    • md.sys.typescale.body-large.font
      • md.ref.typeface.plain
  • md.comp.list.list-item.label-text.weight
    • md.sys.typescale.body-large.weight
      • md.ref.typeface.weight-regular
  • md.comp.list.list-item.label-text.size
    • md.sys.typescale.body-large.size
  • md.comp.list.list-item.label-text.line-height
    • md.sys.typescale.body-large.line-height
  • md.comp.list.list-item.label-text.tracking
    • md.sys.typescale.body-large.tracking
Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt
List list item label text weightmd.comp.list.list-item.label-text.weight
md.sys.typescale.body-large.weightShow reference chainHide reference chain
md.comp.list.list-item.label-text.weight
  • md.sys.typescale.body-large.weight
    • md.ref.typeface.weight-regular
400
Large
Leading Video
Leading Video tokens
TokenValue
List list item large leading video heightmd.comp.list.list-item.large.leading-video.height64dp
List list item large leading video widthmd.comp.list.list-item.large.leading-video.width114dp
Leading Avatar
Leading Avatar tokens
TokenValue
List list item leading avatar sizemd.comp.list.list-item.leading-avatar.size40dp
Leading Avatar Label
Leading Avatar Label tokens
TokenValue
List list item leading avatar label fontmd.comp.list.list-item.leading-avatar-label.font
md.sys.typescale.title-medium.fontShow reference chainHide reference chain
md.comp.list.list-item.leading-avatar-label.font
  • md.sys.typescale.title-medium.font
    • md.ref.typeface.plain
Roboto
List list item leading avatar label line heightmd.comp.list.list-item.leading-avatar-label.line-height
md.sys.typescale.title-medium.line-heightShow reference chainHide reference chain
md.comp.list.list-item.leading-avatar-label.line-height
  • md.sys.typescale.title-medium.line-height
24pt
List list item leading avatar label sizemd.comp.list.list-item.leading-avatar-label.size
md.sys.typescale.title-medium.sizeShow reference chainHide reference chain
md.comp.list.list-item.leading-avatar-label.size
  • md.sys.typescale.title-medium.size
16pt
List list item leading avatar label trackingmd.comp.list.list-item.leading-avatar-label.tracking
md.sys.typescale.title-medium.trackingShow reference chainHide reference chain
md.comp.list.list-item.leading-avatar-label.tracking
  • md.sys.typescale.title-medium.tracking
0.15pt
List list item leading avatar label typemd.comp.list.list-item.leading-avatar-label.type
md.comp.list.list-item.leading-avatar-label.fontmd.comp.list.list-item.leading-avatar-label.weightmd.comp.list.list-item.leading-avatar-label.sizemd.comp.list.list-item.leading-avatar-label.line-heightmd.comp.list.list-item.leading-avatar-label.trackingShow reference chainHide reference chain
md.comp.list.list-item.leading-avatar-label.type
  • md.comp.list.list-item.leading-avatar-label.font
    • md.sys.typescale.title-medium.font
      • md.ref.typeface.plain
  • md.comp.list.list-item.leading-avatar-label.weight
    • md.sys.typescale.title-medium.weight
      • md.ref.typeface.weight-medium
  • md.comp.list.list-item.leading-avatar-label.size
    • md.sys.typescale.title-medium.size
  • md.comp.list.list-item.leading-avatar-label.line-height
    • md.sys.typescale.title-medium.line-height
  • md.comp.list.list-item.leading-avatar-label.tracking
    • md.sys.typescale.title-medium.tracking
Roboto · 16pt · weight 500 · line height 24pt · tracking 0.15pt
List list item leading avatar label weightmd.comp.list.list-item.leading-avatar-label.weight
md.sys.typescale.title-medium.weightShow reference chainHide reference chain
md.comp.list.list-item.leading-avatar-label.weight
  • md.sys.typescale.title-medium.weight
    • md.ref.typeface.weight-medium
500
Leading Icon
Leading Icon tokens
TokenValue
List list item leading icon sizemd.comp.list.list-item.leading-icon.size24dp
Expressive
Expressive tokens
TokenValue
List list item leading icon expressive sizemd.comp.list.list-item.leading-icon.expressive.size20dp
Leading Image
Leading Image tokens
TokenValue
List list item leading image expressive shapemd.comp.list.list-item.leading-image.expressive.shape
md.sys.shape.corner.smallShow reference chainHide reference chain
md.comp.list.list-item.leading-image.expressive.shape
  • md.sys.shape.corner.small
Rounded Corners · DefaultSize: 8dp
List list item leading image heightmd.comp.list.list-item.leading-image.height56dp
List list item leading image widthmd.comp.list.list-item.leading-image.width56dp
Leading Video
Leading Video tokens
TokenValue
List list item leading video widthmd.comp.list.list-item.leading-video.width100dp
One Line
Container
Container tokens
TokenValue
One line list item container heightmd.comp.list.list-item.one-line.container.height56dp
Overline
Overline tokens
TokenValue
List list item overline fontmd.comp.list.list-item.overline.font
md.sys.typescale.label-small.fontShow reference chainHide reference chain
md.comp.list.list-item.overline.font
  • md.sys.typescale.label-small.font
    • md.ref.typeface.plain
Roboto
List list item overline line heightmd.comp.list.list-item.overline.line-height
md.sys.typescale.label-small.line-heightShow reference chainHide reference chain
md.comp.list.list-item.overline.line-height
  • md.sys.typescale.label-small.line-height
16pt
List list item overline sizemd.comp.list.list-item.overline.size
md.sys.typescale.label-small.sizeShow reference chainHide reference chain
md.comp.list.list-item.overline.size
  • md.sys.typescale.label-small.size
11pt
List list item overline trackingmd.comp.list.list-item.overline.tracking
md.sys.typescale.label-small.trackingShow reference chainHide reference chain
md.comp.list.list-item.overline.tracking
  • md.sys.typescale.label-small.tracking
0.5pt
List list item overline typemd.comp.list.list-item.overline.type
md.comp.list.list-item.overline.fontmd.comp.list.list-item.overline.weightmd.comp.list.list-item.overline.sizemd.comp.list.list-item.overline.line-heightmd.comp.list.list-item.overline.trackingShow reference chainHide reference chain
md.comp.list.list-item.overline.type
  • md.comp.list.list-item.overline.font
    • md.sys.typescale.label-small.font
      • md.ref.typeface.plain
  • md.comp.list.list-item.overline.weight
    • md.sys.typescale.label-small.weight
      • md.ref.typeface.weight-medium
  • md.comp.list.list-item.overline.size
    • md.sys.typescale.label-small.size
  • md.comp.list.list-item.overline.line-height
    • md.sys.typescale.label-small.line-height
  • md.comp.list.list-item.overline.tracking
    • md.sys.typescale.label-small.tracking
Roboto · 11pt · weight 500 · line height 16pt · tracking 0.5pt
List list item overline weightmd.comp.list.list-item.overline.weight
md.sys.typescale.label-small.weightShow reference chainHide reference chain
md.comp.list.list-item.overline.weight
  • md.sys.typescale.label-small.weight
    • md.ref.typeface.weight-medium
500
Selected
Selected tokens
TokenValue
List list item selected container shapemd.comp.list.list-item.selected.container.shape
md.sys.shape.corner.largeShow reference chainHide reference chain
md.comp.list.list-item.selected.container.shape
  • md.sys.shape.corner.large
Rounded Corners · DefaultSize: 16dp
Container
Container tokens
TokenValue
List list item container selected expressive shapemd.comp.list.list-item.selected.container.expressive.shape
md.sys.shape.corner.largeShow reference chainHide reference chain
md.comp.list.list-item.selected.container.expressive.shape
  • md.sys.shape.corner.large
Rounded Corners · DefaultSize: 16dp
Small
Leading Video
Leading Video tokens
TokenValue
List list item small leading video heightmd.comp.list.list-item.small.leading-video.height56dp
List list item small leading video widthmd.comp.list.list-item.small.leading-video.width100dp
Supporting Text
Supporting Text tokens
TokenValue
List list item supporting text fontmd.comp.list.list-item.supporting-text.font
md.sys.typescale.body-medium.fontShow reference chainHide reference chain
md.comp.list.list-item.supporting-text.font
  • md.sys.typescale.body-medium.font
    • md.ref.typeface.plain
Roboto
List list item supporting text line heightmd.comp.list.list-item.supporting-text.line-height
md.sys.typescale.body-medium.line-heightShow reference chainHide reference chain
md.comp.list.list-item.supporting-text.line-height
  • md.sys.typescale.body-medium.line-height
20pt
List list item supporting text sizemd.comp.list.list-item.supporting-text.size
md.sys.typescale.body-medium.sizeShow reference chainHide reference chain
md.comp.list.list-item.supporting-text.size
  • md.sys.typescale.body-medium.size
14pt
List list item supporting text trackingmd.comp.list.list-item.supporting-text.tracking
md.sys.typescale.body-medium.trackingShow reference chainHide reference chain
md.comp.list.list-item.supporting-text.tracking
  • md.sys.typescale.body-medium.tracking
0.25pt
List list item supporting text typemd.comp.list.list-item.supporting-text.type
md.comp.list.list-item.supporting-text.fontmd.comp.list.list-item.supporting-text.weightmd.comp.list.list-item.supporting-text.sizemd.comp.list.list-item.supporting-text.line-heightmd.comp.list.list-item.supporting-text.trackingShow reference chainHide reference chain
md.comp.list.list-item.supporting-text.type
  • md.comp.list.list-item.supporting-text.font
    • md.sys.typescale.body-medium.font
      • md.ref.typeface.plain
  • md.comp.list.list-item.supporting-text.weight
    • md.sys.typescale.body-medium.weight
      • md.ref.typeface.weight-regular
  • md.comp.list.list-item.supporting-text.size
    • md.sys.typescale.body-medium.size
  • md.comp.list.list-item.supporting-text.line-height
    • md.sys.typescale.body-medium.line-height
  • md.comp.list.list-item.supporting-text.tracking
    • md.sys.typescale.body-medium.tracking
Roboto · 14pt · weight 400 · line height 20pt · tracking 0.25pt
List list item supporting text weightmd.comp.list.list-item.supporting-text.weight
md.sys.typescale.body-medium.weightShow reference chainHide reference chain
md.comp.list.list-item.supporting-text.weight
  • md.sys.typescale.body-medium.weight
    • md.ref.typeface.weight-regular
400
Three Line
Container
Container tokens
TokenValue
Three lines list item container heightmd.comp.list.list-item.three-line.container.height88dp
Trailing Icon
Trailing Icon tokens
TokenValue
List list item trailing icon sizemd.comp.list.list-item.trailing-icon.size24dp
Expressive
Expressive tokens
TokenValue
List list item trailing icon expressive sizemd.comp.list.list-item.trailing-icon.expressive.size20dp
Trailing Supporting Text
Trailing Supporting Text tokens
TokenValue
List list item trailing supporting text fontmd.comp.list.list-item.trailing-supporting-text.font
md.sys.typescale.label-small.fontShow reference chainHide reference chain
md.comp.list.list-item.trailing-supporting-text.font
  • md.sys.typescale.label-small.font
    • md.ref.typeface.plain
Roboto
List list item trailing supporting text line heightmd.comp.list.list-item.trailing-supporting-text.line-height
md.sys.typescale.label-small.line-heightShow reference chainHide reference chain
md.comp.list.list-item.trailing-supporting-text.line-height
  • md.sys.typescale.label-small.line-height
16pt
List list item trailing supporting text sizemd.comp.list.list-item.trailing-supporting-text.size
md.sys.typescale.label-small.sizeShow reference chainHide reference chain
md.comp.list.list-item.trailing-supporting-text.size
  • md.sys.typescale.label-small.size
11pt
List list item trailing supporting text trackingmd.comp.list.list-item.trailing-supporting-text.tracking
md.sys.typescale.label-small.trackingShow reference chainHide reference chain
md.comp.list.list-item.trailing-supporting-text.tracking
  • md.sys.typescale.label-small.tracking
0.5pt
List list item trailing supporting text typemd.comp.list.list-item.trailing-supporting-text.type
md.comp.list.list-item.trailing-supporting-text.fontmd.comp.list.list-item.trailing-supporting-text.weightmd.comp.list.list-item.trailing-supporting-text.sizemd.comp.list.list-item.trailing-supporting-text.line-heightmd.comp.list.list-item.trailing-supporting-text.trackingShow reference chainHide reference chain
md.comp.list.list-item.trailing-supporting-text.type
  • md.comp.list.list-item.trailing-supporting-text.font
    • md.sys.typescale.label-small.font
      • md.ref.typeface.plain
  • md.comp.list.list-item.trailing-supporting-text.weight
    • md.sys.typescale.label-small.weight
      • md.ref.typeface.weight-medium
  • md.comp.list.list-item.trailing-supporting-text.size
    • md.sys.typescale.label-small.size
  • md.comp.list.list-item.trailing-supporting-text.line-height
    • md.sys.typescale.label-small.line-height
  • md.comp.list.list-item.trailing-supporting-text.tracking
    • md.sys.typescale.label-small.tracking
Roboto · 11pt · weight 500 · line height 16pt · tracking 0.5pt
List list item trailing supporting text weightmd.comp.list.list-item.trailing-supporting-text.weight
md.sys.typescale.label-small.weightShow reference chainHide reference chain
md.comp.list.list-item.trailing-supporting-text.weight
  • md.sys.typescale.label-small.weight
    • md.ref.typeface.weight-medium
500
Two Line
Container
Container tokens
TokenValue
Two lines list item container heightmd.comp.list.list-item.two-line.container.height72dp
Disabled
Container
Container tokens
TokenValue
List list item container disabled expressive shapemd.comp.list.list-item.disabled.container.expressive.shape
md.sys.shape.corner.extra-smallShow reference chainHide reference chain
md.comp.list.list-item.disabled.container.expressive.shape
  • md.sys.shape.corner.extra-small
Rounded Corners · DefaultSize: 4dp
Selected
Container
Container tokens
TokenValue
List list item container selected disabled expressive shapemd.comp.list.list-item.selected.disabled.container.expressive.shape
md.sys.shape.corner.largeShow reference chainHide reference chain
md.comp.list.list-item.selected.disabled.container.expressive.shape
  • md.sys.shape.corner.large
Rounded Corners · DefaultSize: 16dp
Hovered
Container
Container tokens
TokenValue
List list item container hovered expressive shapemd.comp.list.list-item.hovered.container.expressive.shape
md.sys.shape.corner.mediumShow reference chainHide reference chain
md.comp.list.list-item.hovered.container.expressive.shape
  • md.sys.shape.corner.medium
Rounded Corners · DefaultSize: 12dp
Selected
Container
Container tokens
TokenValue
List list item container selected hovered expressive shapemd.comp.list.list-item.selected.hovered.container.expressive.shape
md.sys.shape.corner.largeShow reference chainHide reference chain
md.comp.list.list-item.selected.hovered.container.expressive.shape
  • md.sys.shape.corner.large
Rounded Corners · DefaultSize: 16dp
Focused
Container
Container tokens
TokenValue
List list item container focused expressive shapemd.comp.list.list-item.focused.container.expressive.shape
md.sys.shape.corner.largeShow reference chainHide reference chain
md.comp.list.list-item.focused.container.expressive.shape
  • md.sys.shape.corner.large
Rounded Corners · DefaultSize: 16dp
Selected
Container
Container tokens
TokenValue
List list item container selected focsued expressive shapemd.comp.list.list-item.selected.focused.container.expressive.shape
md.sys.shape.corner.largeShow reference chainHide reference chain
md.comp.list.list-item.selected.focused.container.expressive.shape
  • md.sys.shape.corner.large
Rounded Corners · DefaultSize: 16dp
Pressed
Container
Container tokens
TokenValue
List list item container pressed expressive shapemd.comp.list.list-item.pressed.container.expressive.shape
md.sys.shape.corner.largeShow reference chainHide reference chain
md.comp.list.list-item.pressed.container.expressive.shape
  • md.sys.shape.corner.large
Rounded Corners · DefaultSize: 16dp
Selected
Container
Container tokens
TokenValue
List list item container selected pressed expressive shapemd.comp.list.list-item.selected.pressed.container.expressive.shape
md.sys.shape.corner.largeShow reference chainHide reference chain
md.comp.list.list-item.selected.pressed.container.expressive.shape
  • md.sys.shape.corner.large
Rounded Corners · DefaultSize: 16dp
Dragged
Container
Container tokens
TokenValue
List list item container dragged expressive shapemd.comp.list.list-item.dragged.container.expressive.shape
md.sys.shape.corner.largeShow reference chainHide reference chain
md.comp.list.list-item.dragged.container.expressive.shape
  • md.sys.shape.corner.large
Rounded Corners · DefaultSize: 16dp
Selected
Container
Container tokens
TokenValue
List list item container selected dragged expressive shapemd.comp.list.list-item.selected.dragged.container.expressive.shape
md.sys.shape.corner.largeShow reference chainHide reference chain
md.comp.list.list-item.selected.dragged.container.expressive.shape
  • md.sys.shape.corner.large
Rounded Corners · DefaultSize: 16dp