List
Vertical stack of rows with icons, labels, and accessories.
Selectors
.list- Vertical item list with icon, title/description slots, and auto separators.
.list-plain- Modifier for lists without icons — separators start at padding edge.
.list-inset-grouped- Apple inset-grouped style with card background, rounded corners, and ring shadow.
Default
Project Files
Last updated 2 hours ago
Your profile has been verified
Click to view your profile settings.
Security Alert
New login detected from unknown device.
<div class="list">
<div>
<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg>
<div>
<h3>Project Files</h3>
<p>Last updated 2 hours ago</p>
</div>
<button class="btn-tinted btn-small">Open</button>
</div>
<a href="#">
<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></svg>
<div>
<h3>Your profile has been verified</h3>
<p>Click to view your profile settings.</p>
</div>
<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>
</a>
<div>
<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg>
<div>
<h3>Security Alert</h3>
<p>New login detected from unknown device.</p>
</div>
<button class="btn-tinted btn-small">Review</button>
</div>
</div>With Avatar
Sarah Chen
Admin
Alex Johnson
Editor
Jamie Lee
Viewer
<div class="list">
<div>
<img src="https://i.pravatar.cc/80?img=12" alt="Sarah Chen" class="avatar">
<div>
<h3>Sarah Chen</h3>
<p>Admin</p>
</div>
<span class="text-xs text-tertiary-foreground">Active</span>
</div>
<div>
<img src="https://i.pravatar.cc/80?img=33" alt="Alex Johnson" class="avatar">
<div>
<h3>Alex Johnson</h3>
<p>Editor</p>
</div>
<span class="text-xs text-tertiary-foreground">Away</span>
</div>
<div>
<img src="https://i.pravatar.cc/80?img=47" alt="Jamie Lee" class="avatar">
<div>
<h3>Jamie Lee</h3>
<p>Viewer</p>
</div>
<span class="text-xs text-tertiary-foreground">Offline</span>
</div>
</div>Plain (no icons)
<div class="list list-plain">
<a href="#">
<div>
<h3>General</h3>
<p>About, Software Update, AirDrop</p>
</div>
<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>
</a>
<a href="#">
<div>
<h3>Accessibility</h3>
<p>VoiceOver, Zoom, Display</p>
</div>
<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>
</a>
</div>Inset Grouped
<div class="list list-inset-grouped">
<a href="#">
<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.288 15.038a5.25 5.25 0 0 1 7.424 0M5.106 11.856c3.807-3.808 9.98-3.808 13.788 0"/><circle cx="12" cy="18" r="0.75" fill="currentColor"/></svg>
<div>
<h3>Wi-Fi</h3>
<p>Connected</p>
</div>
<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>
</a>
<a href="#">
<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 8l-4 4 4 4"/><path d="M20.8 12c-.6-4.1-3.6-7.2-7.4-8"/><circle cx="12" cy="20" r="0" fill="currentColor"/><path d="M17 8l4 4-4 4"/><path d="M3.2 12c.6 4.1 3.6 7.2 7.4 8"/></svg>
<div>
<h3>Bluetooth</h3>
<p>On</p>
</div>
<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>
</a>
</div>