Stacked lists

Vertical list rows with optional avatar/title/subtitle, dividers, and link wrapping.

Preview

  • Leslie Alexander

    leslie.alexander@example.com

  • Michael Foster

    michael.foster@example.com

  • Dries Vincent

    dries.vincent@example.com

React preview

LiveView (HEEx) 

alias DesignSystem.UI.StackedLists

<StackedLists.list>
  <:row :for={user <- @users} title={user.name} subtitle={user.email} image={user.avatar_url} href={~p"/users/#{user.id}"}>
    <p class="text-sm/6 text-gray-900 dark:text-white">{user.role}</p>
  </:row>
</StackedLists.list>

React (JSX) 

import { StackedList } from "../ui/index.mjs"

<StackedList items={users.map(u => ({
  id: u.id,
  name: u.name,
  subtitle: u.email,
  image: u.avatarUrl,
  href: `/users/${u.id}`,
  meta: u.role,
}))} />