List

v-list component can contain an avatar, content, actions and much more.

You can make list items rounded using the rounded prop.

Use density prop to adjust the spacing within the component.

Lists can receive a nav styling that reduces the width list items take up and adds a border radius.

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

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

Lists can contain subheaders, dividers, and can contain 1 or more lines.

For three line lists, the subtitle will clamp vertically at 2 lines and then ellipsis.

Today

Brunch this weekend?Ali Connors — I'll be in your neighborhood doing errands this weekend. Do you want to hang out?

Summer BBQto Alex, Scott, Jennifer — Wish I could come, but I'm out of town this weekend.

Oui ouiSandra Adams — Do you have Paris recommendations? Have you ever been?

Birthday giftTrevor Hansen — Have any ideas about what we should get Heidi for her birthday?

Progress rows pair an avatar, title, and a compact progress indicator.

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