List
Data list component for displaying structured information with titles and content.
Basic Example
-
NameJohn Doe
-
Emailjohn@example.com
-
RoleAdministrator
-
StatusActive
<.list>
<:item title="Name">John Doe</:item>
<:item title="Email">john@example.com</:item>
<:item title="Role">Administrator</:item>
</.list>
Team Directory
Studio
Design Systems Group
-
Ava Stone
Product Design Lead
Design Systems · San Francisco, USA
In Focus Heads down until 2 PMDesign Systems Figma Libraries -
Mateo García
Senior Frontend Engineer
Experience Platform · Barcelona, Spain
Reviewing PRs Responding within 10 minPhoenix LiveView Accessibility -
Priya Patel
Product Manager
Growth Experiments · Toronto, Canada
Available Open for syncs this afternoonRoadmapping Cross-functional
<.list>
<:item :for={profile <- @profiles} title={profile.name}>
<div class="flex items-center justify-between">
<div>
<p class="font-medium">{profile.title}</p>
<p class="text-sm text-gray-500">{profile.team}</p>
</div>
<.badge variant={:outline}>{profile.availability}</.badge>
</div>
</:item>
</.list>
With Badges
-
Status
-
Priority
-
Category
<.list>
<:item title="Status">
<.badge variant={:success}>Active</.badge>
</:item>
<:item title="Priority">
<.badge variant={:warning}>High</.badge>
</:item>
</.list>
Activity Feed
-
Design Review
Navigation polish shipped to staging
6 minutes agoView thread -
Content Strategy
Long-form onboarding draft ready for feedback
42 minutes agoView thread -
Dependencies
Payments integration cleared for launch
Today, 9:15 AMView thread
<.list>
<:item :for={item <- @activity} title={item.label}>
<div class="flex gap-3">
<.icon name={item.icon} class="size-4 text-blue-500" />
<div>
<p class="text-sm text-gray-600">{item.description}</p>
<p class="text-xs text-gray-400">{item.timestamp}</p>
</div>
</div>
</:item>
</.list>
Props & Slots
| Prop | Type | Default | Description |
|---|---|---|---|
| item (slot) | slot | required |
List items. Each item accepts:
|