v1.0.0

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-inline-flex vt-items-center vt-justify-center vt-h-5 vt-min-w-[20px] vt-px-1.5 vt-text-[11px] vt-font-semibold vt-bg-error-primary vt-text-generic-white vt-rounded-full">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-text-xs vt-font-medium vt-text-mains-quaternary vt-uppercase vt-tracking-wider 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>

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