Skip to main content
react-md
List - Demos

#Single Line Examples

The most common usage of the @react-md/list package will be to create single line lists that are interactable. This can be accomplished using the List and ListItem components exported by this package. The ListItem component will create a keyboard focusable and clickable element that gains the different interaction states.

The ListItem can also be modified to have icons, avatars, or media placed with the main content.

Note: Lists do not normally have elevation and it was just added for the examples on this page to add some more contrast to the backgrounds. Lists are by default flat against whichever surface they are placed upon.

  • Jasmine Robinson
  • Devonte Craig
  • Dean Reid
  • Shaquille Bauer
  • Vivian Bishop
  • Apps
  • Archive
  • Go Back and Archive
  • Preston Phillips
  • Marco Sherman
  • Haley Coleman
  • Mario Swanson
  • With a graphic
  • With a large graphic
  • With a graphic
  • With a large graphic

#Two Line Examples

The ListItem also supports adding a second line of supplementary text using the secondaryText prop. The secondary text will be placed below the primary text within the item and gain the secondary text color to show some contrast. All the normal left and right addons can be used as well. Just like the primary text within a list item, the secondary text will be truncated once it reaches the overflow point.

  • Folders
  • PhotosJan 04, 2019
  • RecipesJul 30, 2020
  • WorkAug 01, 2020

#Three Line Examples

List items can also be rendered as three lines of text: one line for primary text and two lines for secondary text. This can be enabled by enabling the threeLines prop which will modify the height and update the height for the secondaryText.

  • Bunch this weekend?I'll be in your neighborhood sometime this week. Would you like to try brunch this weekend?
  • Summer BBQWish I could come, but I'm out of town this weekend.
  • See your video? You're a legend!I still can't believe it happened... I'm not sure if my face will ever recover.

#Non Interactable

You can also create non-interactable lists by using the SimpleListItem component even though this method is not recommended as using the default <ul> or <ol> elements along with <li> might be a bit easier due to some styling issues.

Since each ListItem and SimpleListItem is set to display: flex to help with positioning all the parts, the default list styles are invalid since they will only appear with display: list-item. You can add the styles back by applying margin and a &::before element that contains the middle dot or the current index when using an ordered list. This example shows a way to handle both use cases.

  • Jasmine Robinson
  • Devonte Craig
  • Dean Reid
  • Shaquille Bauer
  • Vivian Bishop
  • Braden Mullins
  • Katlyn Mcdonald
  • Isabella Marshall
  • Lee Christensen
  • Tommy Hogan
  • Preston Phillips
  • Marco Sherman
  • Haley Coleman
  • Mario Swanson
  • Xavier Solis
  • Keaton Cannon
  • Cassandra Austin
  • Irene Holland
  • Gustavo Love