List

Lists are continuous, vertical indexes of text or images

Basic

A basic list of items with title and subtitle.

One text
Another text
A little text
Some more text
Even more text
Another little text

A vs-list-header separator with custom color.

Group 1
Snickerdoodle
An excellent companion
Sapporo Haru
An excellent polish restaurant, quick delivery and hearty, filling meals
Group 2
Enid's
At night a bar, during the day a delicious brunch spot.
Veronika Ossi
Has not watched anything recently

Icon

The list items and the headers can have a icon as well.

TIP

Vuesax uses the Google Material Icons font library by default. For a list of all available icons, visit the official Material Icons pageopen in new window. Other icon libraries can be used by providing the class for the respective pack in the icon-pack property. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal.

supervisor_account
Group 1
check
Snickerdoodle
An excellent companion
check
Sapporo Haru
An excellent polish restaurant, quick delivery and hearty, filling meals
how_to_reg
Group 2
verified_user
Enid's
At night a bar, during the day a delicious brunch spot.
verified_user
Veronika Ossi
Has not watched anything recently

Content

You can add custom content to the item. It will be pushed to the right side.

Group 1
Rachel
Last seen watching Arrested Development just now.
Lindsay
Last seen watching Bob's Burgers 10 hours ago.
check
Group 2
Enid's
At night a bar, during the day a delicious brunch spot.
Another component
Veronika Ossi
Has not watched anything recently

Avatar

You can implement an avatar in the list with the slot="avatar" by putting a [vs-avatar] component (/components/avatar.html)

Users
Steve Jobes
Top Contributor
Matt
11 Points
Profile photo
Xian Famous Foods
A taste of Shaanxi's delicious culinary traditions, with delights like spicy cold noodles and lamb burgers.

API #

NameTypeParametersDescriptiondefault
colorStringRGB, HEX, primary, success, danger, warning, darkComponent colorprimary
iconStringMaterial iconsAn icon to show
icon-packStringIcon Pack Class NameIcon Pack to be used. If not set, icon will default to Material Icons. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal.material-icons
titleStringList primary text
subtitleStringList secondary text
slot="avatar"SlotSlot to add the avatar in the list