Lists

Lists provide a vertical layout to display information in rows. They can contain various content types including text, images, and actions arranged in a consistent format.

List with Header

Lists can include a header element that describes the content below. This provides context for the items and improves organization.

Preview

Featured Items
Featured Item 1
Featured Item 2
Featured Item 3

Code

= daisy_list(header: "Featured Items") do |list|
  - list.with_item { "Featured Item 1" }
  - list.with_item { "Featured Item 2" }
  - list.with_item { "Featured Item 3" }

Styled List

Lists can be customized with additional CSS classes for enhanced visual presentation. This example adds a background, rounded corners, shadow, and dividers between items.

Preview

Item 1
Item 2
Item 3

Code

= daisy_list(css: "bg-base-100 shadow-md") do |list|
  - list.with_item { "Item 1" }
  - list.with_item { "Item 2" }
  - list.with_item { "Item 3" }

List with Images

List items can contain rich content including images and structured text. This is useful for displaying user profiles or other complex information.

Preview

User Profiles
Alice Johnson

Product Designer
Jane Smith

Software Engineer
Carol Davis

UX Researcher

Code

= daisy_list(header: "User Profiles", header_css: "p-4 pb-2 text-xs opacity-60 tracking-wide", css: "bg-base-100 rounded-box shadow-md") do |list|
  - list.with_item do |item|
    = image_tag("avatars/lady-smiling-1.jpg", class: "size-10 rounded-box")
    .flex.flex-col
      .font-medium Alice Johnson
      .text-xs.opacity-60 Product Designer

  - list.with_item do |item|
    = image_tag("avatars/lady-smiling-2.jpg", class: "size-10 rounded-box")
    .flex.flex-col
      .font-medium Jane Smith
      .text-xs.opacity-60 Software Engineer

  - list.with_item do |item|
    = image_tag("avatars/lady-smiling-3.jpg", class: "size-10 rounded-box")
    .flex.flex-col
      .font-medium Carol Davis
      .text-xs.opacity-60 UX Researcher

Interactive List

Lists can include interactive elements like buttons to provide additional functionality. This example shows a music player interface with play and favorite buttons.

Preview

Most played songs
Remaining Reason

Dio Lupa
Bears of a Fever

Ellie Beilish
Cappuccino

Sabrino Gardener

Code

= daisy_list(header: "Most played songs", header_css: "p-4 pb-2 text-xs opacity-60 tracking-wide", css: "w-100 bg-base-100 rounded-box shadow-md") do |list|
  - list.with_item do |item|
    = image_tag("avatars/lady-smiling-1.jpg", class: "size-10 rounded-box")
    .flex.flex-col
      .font-medium Remaining Reason
      .text-xs.uppercase.font-semibold.opacity-60 Dio Lupa
    = daisy_button(css: "btn-square btn-ghost") do
      = hero_icon("play")
    = daisy_button(css: "btn-square btn-ghost") do
      = hero_icon("heart")

  - list.with_item do |item|
    = image_tag("avatars/lady-smiling-4.jpg", class: "size-10 rounded-box")
    .flex.flex-col
      .font-medium Bears of a Fever
      .text-xs.uppercase.font-semibold.opacity-60 Ellie Beilish
    = daisy_button(css: "btn-square btn-ghost") do
      = hero_icon("play")
    = daisy_button(css: "btn-square btn-ghost") do
      = hero_icon("heart")

  - list.with_item do |item|
    = image_tag("avatars/lady-smiling-3.jpg", class: "size-10 rounded-box")
    .flex.flex-col
      .font-medium Cappuccino
      .text-xs.uppercase.font-semibold.opacity-60 Sabrino Gardener
    = daisy_button(css: "btn-square btn-ghost") do
      = hero_icon("play")
    = daisy_button(css: "btn-square btn-ghost") do
      = hero_icon("heart")

Basic List

List with Header

Styled List

List with Images

Interactive List

Docs

Guides

Hero

Daisy