Heroes are used to provide a large, eye-catching introduction to a page or site. They are responsive by default and will stack on smaller screens.
The basic hero is a simple hero with a title and a subtitle.
= daisy_hero(css: "max-w-[1000px] mx-4 sm:mx-16 lg:mx-32 bg-base-200 text-center") do
- # The hero's content wrapper lays children out in a flex row, so we
- # group ours in a single div to stack them
%div
%h1.text-5xl.font-bold
Hello, World!
%p.my-6
Welcome to the world of LocoMotion.
= daisy_button(css: "btn btn-primary", title: "Get Started", href: "/")
You can add an image to the hero by making it the first or last child.
You can also change the layout of the hero by passing custom css
(like block here) or a content_wrapper_css to make it responsive —
these examples stack their content below the sm breakpoint with
max-sm:flex-col.
= daisy_hero(css: "block max-w-[1000px] mx-4 sm:mx-16 py-8 lg:mx-32 bg-base-200", content_wrapper_css: "max-sm:flex-col") do
%img.h-40.rounded{ src: image_path('landscapes/mountain-river.jpg'), alt: "Beautiful Landscape" }
%div
%h1.text-5xl.font-bold
Hello, World!
%p.my-6
Welcome to the world of LocoMotion.
= daisy_button(css: "btn btn-primary", title: "Get Started", href: "/")
= daisy_hero(css: "block max-w-[1000px] mx-4 sm:mx-16 py-8 lg:mx-32 bg-base-200", content_wrapper_css: "max-sm:flex-col") do
%div
%h1.text-5xl.font-bold
Hello, World!
%p.my-6
Welcome to the world of LocoMotion.
= daisy_button(css: "btn btn-primary", title: "Get Started", href: "/")
%img.h-40.rounded{ src: image_path('landscapes/mountain-river.jpg'), alt: "Beautiful Landscape" }
The Hero component provides an overlay slot allowing you to add a
semi-transparent background to the hero and apply other effects (such as a
blur).
- image = image_path("landscapes/mountain-river.jpg")
- fix_for_v5_bug = "z-0"
= daisy_hero(css: "max-w-[1000px] mx-4 sm:mx-16 lg:mx-32 bg-base-200 min-h-96", content_wrapper_css: fix_for_v5_bug, html: { style: "background-image: url('#{image}')" }) do |hero|
- hero.with_overlay(css: "bg-black/50 backdrop-blur-xs")
%div.text-white
%h1.text-5xl.font-bold
Hello, World!
%p.my-6
Welcome to the world of LocoMotion.
= daisy_button(css: "btn btn-accent", title: "Get Started", href: "/")
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.