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:
The double line lists are good to show additional information about single items:
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:
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
If you pass a
href attribute, the item will automatically render an
All options of
router-link can be simply used here. This will render an
Lists accept controls as main toggle actions. Really useful to improve form layouts:
Lists can have expansion panels to reveal more options: