# Lists

The v-list component is used to display information. It can contain an avatar, content, actions, subheaders and much more. Lists present content in a way that makes it easy to identify a specific item in a collection. They provide a consistent styling for organizing groups of text and images.

# Usage

Lists come in three main variations. single-line (default), two-line and three-line. The line declaration specifies the minimum height of the item and can also be controlled from v-list with the same prop.


# Caveats

# Examples

# Props

# Dense

v-list can be lowered with dense property.

# Disabled

You cannot interact with disabled v-list.

# Flat

Items don’t change when selected in v-list with flat property.

# Rounded

You can make v-list items rounded.

# Shaped

Shaped lists have rounded borders on one side of the v-list-item.

# Sub group

Using the v-list-group component you can create up to 2 levels in depth using the sub-group prop.

# Three line

For three line lists, the subtitle will clamp vertically at 2 lines and then ellipsis. This feature uses line-clamp and is not supported in all browsers.

# Two lines and subheader

Lists can contain subheaders, dividers, and can contain 1 or more lines. The subtitle will overflow with ellipsis if it extends past one line.

# Slots

# Expansion Lists

A list can contain a group of items which will display on click utilizing v-list-group's activator slot. Expansion lists are also used within the v-navigation-drawer component.

# Misc

# Action and item groups

A three-line list with actions. Utilizing v-list-item-group, easily connect actions to your tiles.

# Action stack

A list can contain a stack within an action. This is useful when you need to display meta text next to your action item.

# Card list

A list can be combined with a card.

# Simple avatar list

A simple list utilizing v-list-item-icon, v-list-item-title and v-list-item-avatar.

# Single line list

Here we combine v-list-item-avatar and v-list-item-icon in a single-line list.

# Subheadings and dividers

Lists can contain multiple subheaders and dividers.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page on GitHub
Last updated:07/05/2022, 9:08:15 PM