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.
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 a
content_wrapper_css to make it responsive or add other styling.
= daisy_hero(css: "bg-base-200", content_wrapper_css: "flex-col md:flex-row") 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: "bg-base-200", content_wrapper_css: "flex-col md:flex-row") 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")
= daisy_hero(css: "bg-base-200 min-h-96", html: { style: "background-image: url('#{image}')" }) do |hero|
- hero.with_overlay(css: "bg-black bg-opacity-50 backdrop-blur")
%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: "/")