Vue Material -


Lists present multiple line items vertically as a single continuous element and are best suited for similar data types.

They can have one, two or three lines of content, with a lot of different contents. Even that the examples on this page may look like that lists can only be used in mobile viewport, you can and should use them in desktop too.

List items can have interaction events, like click and mousedown events. They also integrate nicely with Vue Router.


Single line lists are really great for navigational elements, such as drawers. You can pass a icons, text and actions to them. They have also a dense layout, to accommodate more items on the screen:

Single Line

The double line lists are good to show additional information about single items:

Double Line

The three line lists are great for showing a preview of the full content of the item. It's good for email lists and other information like that:

Triple Line

List Actions

List items will render different tags based on the interaction types given.

If you pass one of those event, the item will automatically render a button:

  • click
  • dblclick
  • mousedown
  • mouseup

If you pass a href attribute, the item will automatically render an a tag.

All options of router-link can be simply used here. This will render an a tag:

Different types

Lists accept controls as main toggle actions. Really useful to improve form layouts:


Lists can have expansion panels to reveal more options:


API - md-content

Coming soon...