v1.0.8

List

Displays a collection of items in a vertical list layout.

Default

Simple text items with dividers.

html
General
Privacy
Notifications
Appearance
Language 
<div class="vt-rounded-xl vt-border">
  <div class="vt-list-item">
    <span class="vt-text-sm vt-font-medium">General</span>
  </div>
  <hr />
  <div class="vt-list-item">
    <span class="vt-text-sm vt-font-medium">Privacy</span>
  </div>
  <hr />
  <div class="vt-list-item">
    <span class="vt-text-sm vt-font-medium">Notifications</span>
  </div>
</div>

With Description

Title and subtitle for each list item.

html
Display Name
Your name as shown to other users
Email Address
Used for login and notifications
Password
Last changed 3 months ago
Two-Factor Authentication
Add an extra layer of security
<div class="vt-rounded-xl vt-border">
  <div class="vt-list-item">
    <div class="vt-text-sm vt-font-medium">Display Name</div>
    <div class="vt-text-sm vt-text-mains-quaternary">Your name as shown to other users</div>
  </div>
  <hr />
  <div class="vt-list-item">
    <div class="vt-text-sm vt-font-medium">Email Address</div>
    <div class="vt-text-sm vt-text-mains-quaternary">Used for login and notifications</div>
  </div>
  ...
</div>

With Leading Icon/Avatar

Avatar or icon before the text content.

html
AS
Alice Smith
alice.smith@example.com
BJ
Bob Johnson
bob.johnson@example.com
CW
Carol Williams
carol.williams@example.com
DM
David Miller
david.miller@example.com
<div class="vt-rounded-xl vt-border">
  <div class="vt-list-item">
    <div class="vt-flex-shrink-0 vt-w-10 vt-h-10 vt-rounded-full vt-bg-info-primary/10 vt-flex vt-items-center vt-justify-center vt-text-sm vt-font-semibold vt-text-info-primary">AS</div>
    <div class="vt-flex-1 vt-min-w-0">
      <div class="vt-text-sm vt-font-medium">Alice Smith</div>
      <div class="vt-text-sm vt-text-mains-quaternary vt-truncate">alice.smith@example.com</div>
    </div>
  </div>
  <hr />
  ...
</div>

With Trailing

Items with trailing chevrons or badges.

html
Notifications
12
Storage
24.5 GB
Battery
87%
Wi-Fi
Connected 
<div class="vt-rounded-xl vt-border">
  <div class="vt-list-item vt-justify-between">
    <span class="vt-text-sm vt-font-medium">Notifications</span>
    <div class="vt-flex vt-items-center vt-gap-2">
      <span class="vt-count-badge">12</span>
      <svg>...</svg>
    </div>
  </div>
  <hr />
  ...
</div>

Grouped

Sections with headers, like iOS settings.

html

Account

Profile
Security
Notifications

Preferences

Appearance
System
Language
English

Danger Zone

Sign Out
Delete Account 
<div class="vt-space-y-6">
  <div>
    <h3 class="vt-section-label vt-px-4 vt-mb-1.5">Account</h3>
    <div class="vt-rounded-xl vt-border">
      <div class="vt-list-item vt-justify-between">
        <div class="vt-flex vt-items-center vt-gap-3">
          <svg>...</svg>
          <span class="vt-text-sm vt-font-medium">Profile</span>
        </div>
        <svg>...</svg>
      </div>
      <hr />
      ...
    </div>
  </div>
  ...
</div>

Interactive

Selectable items with checkmarks.

html
System Default
Light Mode
Dark Mode
High Contrast 
<div class="vt-rounded-xl vt-border">
  <div class="vt-list-item vt-justify-between vt-cursor-pointer">
    <span class="vt-text-sm vt-font-medium">System Default</span>
    <svg>...</svg>
  </div>
  <hr />
  <div class="vt-list-item vt-justify-between vt-cursor-pointer">
    <span class="vt-text-sm vt-font-medium">Light Mode</span>
    <div class="vt-w-4 vt-h-4"></div>
  </div>
  ...
</div>

Guidelines

Vertical stack of list-item rows inside a card (settings, notifications). Column data → table.

Display Name
Shown to other users
Email Address
Used for login
Do
Group related rows in a card and divide them with separators.
Display Name
Shown to other users
Email Address
Used for login
Don't
Don't float rows with no container or dividers.
System Default
Dark Mode
Do
Mark the selected row with a trailing check.
NameRoleStatusDate
AliceAdminActiveJan 4
Don't
Don't cram multi-column data into a list — use a table.

API Reference

All CSS classes available for the List component.

Class Type Description
vt-rounded-xl vt-border vt-border-border-default Container Rounded card container with border for list groups
vt-px-4 vt-py-3 Spacing Standard list item padding
vt-text-sm vt-font-medium Typography Default item text style
vt-text-mains-quaternary Color Secondary text and description color
vt-flex vt-items-center vt-justify-between Layout Horizontal layout with trailing content
vt-flex vt-items-center vt-gap-3 Layout Leading icon or avatar with text
vt-hover:bg-surfaces-subtle State Hover background for interactive items
vt-cursor-pointer State Pointer cursor for clickable items
vt-text-error-primary Color Danger text for destructive actions

Accessibility

Keyboard and screen reader support.

Feature Details
Semantics Use ul/ol/li elements for proper list semantics
Navigation Screen readers announce list length and position (e.g. "item 2 of 5")
Interactive Clickable list items should use button or anchor elements inside li
Description Complex list items benefit from aria-label summarizing the content
Built with:
Icons