List containers

Wrappers for vertical lists with divider styling: bare, card, flat-card, or separate-cards.

Preview

Simple with dividers

Project Apollo

Updated 2 hours ago

View
Project Gemini

Updated yesterday

View
Project Mercury

Updated last week

View

Card with dividers

Project Apollo

Updated 2 hours ago

View
Project Gemini

Updated yesterday

View
Project Mercury

Updated last week

View

Flat card with dividers

Project Apollo

Updated 2 hours ago

View
Project Gemini

Updated yesterday

View
Project Mercury

Updated last week

View

Separate cards

Project Apollo

Updated 2 hours ago

View
Project Gemini

Updated yesterday

View
Project Mercury

Updated last week

View

React preview

LiveView (HEEx)

alias DesignSystem.UI.ListContainers

<ListContainers.list_container variant="card">
  <:item :for={project <- @projects}>
    <div class="flex items-center justify-between">
      <div>
        <p class="text-sm font-medium text-gray-900 dark:text-white">{project.title}</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">{project.subtitle}</p>
      </div>
      <span class="text-xs text-gray-400 dark:text-gray-500">View</span>
    </div>
  </:item>
</ListContainers.list_container>

React (JSX)

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

<ListContainer variant="card" items={items} />