Dividers are used to separate content in a meaningful way. They can be used to separate different sections of a page or to highlight a specific piece of content.
They can be used both horizontally and vertically, and can include content if desired.
The basic divider is a simple horizontal or vertical line that can be used to separate content.
.w-full{ class: "md:w-1/3" }
- card_css = "border border-base-300 bg-base-100 shadow-xl text-center"
= daisy_card(css: card_css) do
Top Card
= daisy_divider do
OR
= daisy_card(css: card_css) do
Bottom Card
.flex.grow
- card_css = "h-48 border border-base-300 bg-base-100 shadow-xl"
= daisy_card(css: card_css, body_css: "justify-center") do
Left Card
= daisy_divider(css: "divider-horizontal") do
OR
= daisy_card(css: card_css, body_css: "justify-center") do
Right Card
Dividers can be colored to match the theme of the page or to highlight specific content.
.w-full{ class: "md:w-1/2" }
= daisy_divider do
Default Divider
= daisy_divider(css: "divider-neutral") do
Neutral
= daisy_divider(css: "divider-primary") do
Primary
= daisy_divider(css: "divider-secondary") do
Secondary
= daisy_divider(css: "divider-accent") do
Accent
= daisy_divider(css: "divider-success") do
Success
= daisy_divider(css: "divider-warning") do
Warning
= daisy_divider(css: "divider-info") do
Info
= daisy_divider(css: "divider-error") do
Error
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.