List

Playground

Options (page defaults are size-md + theme-neutral + variant-style-soft)

Basic List

mode-light
  • Item 1default separator
  • Item 2inset separator
  • Item 3no separator line
  • Item 4Description for item 4
mode-dark
  • Item 1default separator
  • Item 2inset separator
  • Item 3no separator line
  • Item 4Description for item 4

Interactive List (with columns)

mode-light
  • A
    Alex Johnson

    Software Engineer

    2m ago
  • B
    Beatrix Smith

    Product Designer

    1h ago
  • 1
    State example

    rest

    Now
  • 2
    State example

    state-hover

    Now
  • 3
    State example

    state-active

    Now
  • 4
    State example

    state-focus

    Now
  • 5
    State example

    state-disabled

    Now
mode-dark
  • A
    Alex Johnson

    Software Engineer

    2m ago
  • B
    Beatrix Smith

    Product Designer

    1h ago
  • 1
    State example

    rest

    Now
  • 2
    State example

    state-hover

    Now
  • 3
    State example

    state-active

    Now
  • 4
    State example

    state-focus

    Now
  • 5
    State example

    state-disabled

    Now

Layout Utilities (Grow & Wrap)

mode-light
Growing Column
Action
Wrapped Content
This subtitle is marked as list-col-wrap, so it should span across all columns on a second row if the parent is a grid.
Edit
mode-dark
Growing Column
Action
Wrapped Content
This subtitle is marked as list-col-wrap, so it should span across all columns on a second row if the parent is a grid.
Edit