Here are some simple collapse examples.
Collapses are transparent by default and add additional padding.
You can apply the collapse-arrow or collapse-plus CSS modifiers
directly to each collapse.
.flex.flex-col.gap-4{ class: "w-[400px]" }
= daisy_collapse(title: "Click to Open", css: "bg-base-100 border border-base-300 collapse-arrow") do |collapse|
This is the content of the arrow collapse.
= daisy_collapse(title: "Click to Open", css: "bg-base-100 border border-base-300 collapse-plus") do |collapse|
This is the content of the plus collapse.
You can also customize the collapse with any HTML you desire!
.mx-auto{ class: "w-[400px]" }
= daisy_collapse(css: "collapse-arrow bg-base-200 border border-base-300") do |collapse|
- collapse.with_title(css: "collapse-title bg-base-300") do
.flex.gap-x-2.items-center
= heroicon("user-circle", class: "size-6")
%strong User Profile
.mt-4.flex.gap-x-4.items-center
= daisy_avatar(src: image_path("avatars/lady-smiling-1.jpg"))
%div
.text-xl.font-bold Jane Oliver
.italic jane@oliver.test
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.