Django Vibe Components

Standard Lists

Lists present content in a way that makes it easy to identify a specific item in a collection.

Basic List

Inbox
Starred
Sent
Drafts

With Dividers

Inbox
Starred
Sent
Drafts

List Variants

Lists can be styled in different ways to match different design contexts.

Inset List

Inbox
Starred
Sent
Drafts

Dense List

Inbox
Starred
Sent
Drafts

Content Variations

List items can display different levels of detail through titles, subtitles, and supporting text.

With Titles

Inbox
Starred
Sent
Drafts

With Title and Subtitle

Inbox

All incoming messages
Starred

Important messages
Sent

Outgoing messages
Drafts

Unsent messages

With Leading and Trailing Elements

Lists can include icons, images, or other elements before or after the main content.

Using Sub-components

inbox

Inbox

14
star

Starred

5
send

Sent

chevron_right

Interactive Lists

Lists can include interactive elements like clickable items or checkboxes.

Clickable Items

settings

Settings
person

Profile
help

Help

With Checkboxes (Leading and Trailing)

Task 1
Task 2
Task 3

Lists with Subheader

Lists can be organized with subheaders and dividers to group related content.

Messages
John Doe

Meeting reminder

I wanted to remind you about our meeting tomorrow at 10:00 AM. Please bring your presentation slides.
Jane Smith

Project update

I've completed the first phase of the project. Please review it when you have time.
Notifications
System

Update available

A new system update is available. Please restart your device to install it.
App Store

Updates available

3 apps have updates available for download.

Usage

<!-- Basic List -->
<c-list.container>
  <c-list.item>Inbox</c-list.item>
  <c-list.item>Starred</c-list.item>
  <c-list.item>Sent</c-list.item>
</c-list.container>

<!-- With Dividers -->
<c-list.container dividers="true">
  <c-list.item>Inbox</c-list.item>
  <c-list.item>Starred</c-list.item>
</c-list.container>

<!-- Inset List -->
<c-list.container variant="inset">
  <c-list.item>Inbox</c-list.item>
  <c-list.item>Starred</c-list.item>
</c-list.container>

<!-- Dense List -->
<c-list.container dense="true">
  <c-list.item>Inbox</c-list.item>
  <c-list.item>Starred</c-list.item>
</c-list.container>

<!-- With Title and Subtitle -->
<c-list.container>
  <c-list.item title="Inbox" subtitle="All incoming messages"></c-list.item>
  <c-list.item title="Starred" subtitle="Important messages"></c-list.item>
</c-list.container>

<!-- With Leading and Trailing Elements -->
<c-list.container>
  <c-list.item title="Inbox">
    <c-slot name="leading">
      <c-list.leading.icon>inbox</c-list.leading.icon>
    </c-slot>
    <c-slot name="trailing">
      <c-list.trailing.text>14</c-list.trailing.text>
    </c-slot>
  </c-list.item>
</c-list.container>

<!-- Clickable Items -->
<c-list.container>
  <c-list.item clickable="true" title="Settings">
    <c-slot name="leading">
      <c-list.leading.icon>settings</c-list.leading.icon>
    </c-slot>
  </c-list.item>
</c-list.container>

<!-- With Form Elements -->
<c-list.container>
  <c-list.item title="Task 1">
    <c-slot name="trailing">
      <c-forms.checkbox id="list-task1" class="m-0"></c-forms.checkbox>
    </c-slot>
  </c-list.item>
  <c-list.item title="Task 2">
    <c-slot name="leading">
      <c-forms.checkbox id="list-task2" class="m-0"></c-forms.checkbox>
    </c-slot>
  </c-list.item>
</c-list.container>

<!-- With Subheaders -->
<c-list.container>
  <c-list.subheader>Messages</c-list.subheader>
  <c-list.item title="John" subtitle="Project update"></c-list.item>
  <c-list.subheader>Notifications</c-list.subheader>
  <c-list.item title="System" subtitle="Update available"></c-list.item>
</c-list.container>

Attributes

Component	Attribute	Type	Default	Description
`c-list.container`	`variant`	string	""	List variant. Options: "", "inset"
`c-list.container`	`dividers`	boolean	false	When true, adds dividers between list items
`c-list.container`	`dense`	boolean	false	When true, reduces the size of list items
`c-list.item`	`title`	string	none	Primary text for the list item
`c-list.item`	`subtitle`	string	none	Secondary text for the list item
`c-list.item`	`supporting`	string	none	Additional supporting text for the list item
`c-list.item`	`clickable`	boolean	false	When true, styles the item as clickable
`c-list.item`	`line_clamp`	boolean	false	When true, truncates text that overflows

List Components