# 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.


# Examples

# Props

# Items

Lists can either be created by markup using the many sub-components that are available, or by using the items prop.

To customize which properties will be used for the title and value of each item, use the item-title and item-value props.

If you need to render subheaders or dividers, add an item with a type property. Which property to use can be customized using the item-type prop.

To customize individual items, you can use the item-props prop. It defaults to looking for a props property on the items. The value should be an object, and if found it will be spread on the v-list-item component.

If item-props is set to true then the whole item will be spread.

# Density

v-list supports the density property.

# Disabled

You cannot interact with disabled v-list.

# Variant

v-list supports the variant prop.

# 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 sub-groups of items.

# 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.

# Misc

# Action and item groups

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

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.