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.
A simple list that displays items in a vertical arrangement. Each item is rendered as a list element with basic styling.
= daisy_list do |list|
- list.with_item { "Item 1" }
- list.with_item { "Item 2" }
- list.with_item { "Item 3" }
Lists can include a header element that describes the content below. This provides context for the items and improves organization.
= 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" }
Lists can be customized with additional CSS classes for enhanced visual presentation. This example adds a background, rounded corners, and a shadow.
= daisy_list(css: "bg-base-100 rounded-box shadow-md") do |list|
- list.with_item { "Item 1" }
- list.with_item { "Item 2" }
- list.with_item { "Item 3" }
List items can contain rich content including images and structured text. This is useful for displaying user profiles or other complex information.
= 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
Lists can include interactive elements like buttons to provide additional functionality. This example shows a music player interface with play and favorite buttons.
= daisy_list(header: "Most played songs", header_css: "p-4 pb-2 text-xs opacity-60 tracking-wide", css: "w-full max-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
= loco_icon("play")
= daisy_button(css: "btn-square btn-ghost") do
= loco_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
= loco_icon("play")
= daisy_button(css: "btn-square btn-ghost") do
= loco_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
= loco_icon("play")
= daisy_button(css: "btn-square btn-ghost") do
= loco_icon("heart")
Create virtual credit / debit cards to keep your real info safe.
Get $5 when you sign up — free to start!
Everything you need to grow your business with confidence!
CRM, Lead Generation, Project Management, Contracts, Online Payments, and more!
The ads above are affiliate links to products I regularly use and highly
recommend.
I may receive a commission if you decide to purchase.