Hero
Hero is a component for displaying a large box or image with a title and description.
This page is not up to date. Some of the examples might not work as expected.
| Class name | Type | |
|---|---|---|
| hero | Component | Hero container |
| hero-content | Part | content part |
| hero-overlay | Part | Overlay that covers the background image |
Hello there
Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.
<div class="$$hero bg-base-200 min-h-screen"> <div class="$$hero-content text-center"> <div class="max-w-md"> <h1 class="text-5xl font-bold">Hello there</h1> <p class="py-6"> Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi. </p> <button class="$$btn $$btn-primary">Get Started</button> </div> </div> </div>
<div class="$$hero bg-base-200 min-h-screen">
<div class="$$hero-content text-center">
<div class="max-w-md">
<h1 class="text-5xl font-bold">Hello there</h1>
<p class="py-6">
Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem
quasi. In deleniti eaque aut repudiandae et a id nisi.
</p>
<button class="$$btn $$btn-primary">Get Started</button>
</div>
</div>
</div>
<div class="$$hero bg-base-200 min-h-screen">
<div class="$$hero-content text-center">
<div class="max-w-md">
<h1 class="text-5xl font-bold">Hello there</h1>
<p class="py-6">
Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem
quasi. In deleniti eaque aut repudiandae et a id nisi.
</p>
<button class="$$btn $$btn-primary">Get Started</button>
</div>
</div>
</div>
<div class="$$hero bg-base-200 min-h-screen">
<div class="$$hero-content text-center">
<div class="max-w-md">
<h1 class="text-5xl font-bold">Hello there</h1>
<p class="py-6">
Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem
quasi. In deleniti eaque aut repudiandae et a id nisi.
</p>
<button class="$$btn $$btn-primary">Get Started</button>
</div>
</div>
</div>
Box Office News!
Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.
<div class="$$hero bg-base-200 min-h-screen"> <div class="$$hero-content flex-col lg:flex-row"> <img src="https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.webp" class="max-w-sm rounded-lg shadow-2xl" /> <div> <h1 class="text-5xl font-bold">Box Office News!</h1> <p class="py-6"> Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi. </p> <button class="$$btn $$btn-primary">Get Started</button> </div> </div> </div>
<div class="$$hero bg-base-200 min-h-screen">
<div class="$$hero-content flex-col lg:flex-row">
<img
src="https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.webp"
class="max-w-sm rounded-lg shadow-2xl" />
<div>
<h1 class="text-5xl font-bold">Box Office News!</h1>
<p class="py-6">
Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem
quasi. In deleniti eaque aut repudiandae et a id nisi.
</p>
<button class="$$btn $$btn-primary">Get Started</button>
</div>
</div>
</div>
<div class="$$hero bg-base-200 min-h-screen">
<div class="$$hero-content flex-col lg:flex-row">
<img
src="https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.webp"
class="max-w-sm rounded-lg shadow-2xl" />
<div>
<h1 class="text-5xl font-bold">Box Office News!</h1>
<p class="py-6">
Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem
quasi. In deleniti eaque aut repudiandae et a id nisi.
</p>
<button class="$$btn $$btn-primary">Get Started</button>
</div>
</div>
</div>
<div class="$$hero bg-base-200 min-h-screen">
<div class="$$hero-content flex-col lg:flex-row">
<img
src="https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.webp"
class="max-w-sm rounded-lg shadow-2xl" />
<div>
<h1 class="text-5xl font-bold">Box Office News!</h1>
<p class="py-6">
Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem
quasi. In deleniti eaque aut repudiandae et a id nisi.
</p>
<button class="$$btn $$btn-primary">Get Started</button>
</div>
</div>
</div>Box Office News!
Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.
<div class="$$hero bg-base-200 min-h-screen"> <div class="$$hero-content flex-col lg:flex-row-reverse"> <img src="https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.webp" class="max-w-sm rounded-lg shadow-2xl" /> <div> <h1 class="text-5xl font-bold">Box Office News!</h1> <p class="py-6"> Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi. </p> <button class="$$btn $$btn-primary">Get Started</button> </div> </div> </div>
<div class="$$hero bg-base-200 min-h-screen">
<div class="$$hero-content flex-col lg:flex-row-reverse">
<img
src="https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.webp"
class="max-w-sm rounded-lg shadow-2xl" />
<div>
<h1 class="text-5xl font-bold">Box Office News!</h1>
<p class="py-6">
Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem
quasi. In deleniti eaque aut repudiandae et a id nisi.
</p>
<button class="$$btn $$btn-primary">Get Started</button>
</div>
</div>
</div>
<div class="$$hero bg-base-200 min-h-screen">
<div class="$$hero-content flex-col lg:flex-row-reverse">
<img
src="https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.webp"
class="max-w-sm rounded-lg shadow-2xl" />
<div>
<h1 class="text-5xl font-bold">Box Office News!</h1>
<p class="py-6">
Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem
quasi. In deleniti eaque aut repudiandae et a id nisi.
</p>
<button class="$$btn $$btn-primary">Get Started</button>
</div>
</div>
</div>
<div class="$$hero bg-base-200 min-h-screen">
<div class="$$hero-content flex-col lg:flex-row-reverse">
<img
src="https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.webp"
class="max-w-sm rounded-lg shadow-2xl" />
<div>
<h1 class="text-5xl font-bold">Box Office News!</h1>
<p class="py-6">
Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem
quasi. In deleniti eaque aut repudiandae et a id nisi.
</p>
<button class="$$btn $$btn-primary">Get Started</button>
</div>
</div>
</div>Login now!
Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.
<div class="$$hero bg-base-200 min-h-screen"> <div class="$$hero-content flex-col lg:flex-row-reverse"> <div class="text-center lg:text-left"> <h1 class="text-5xl font-bold">Login now!</h1> <p class="py-6"> Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi. </p> </div> <div class="$$card bg-base-100 w-full max-w-sm shrink-0 shadow-2xl"> <form class="$$card-body"> <div class="$$form-control"> <label class="$$label"> <span class="$$label-text">Email</span> </label> <input type="email" placeholder="email" class="$$input $$input-bordered" required /> </div> <div class="$$form-control"> <label class="$$label"> <span class="$$label-text">Password</span> </label> <input type="password" placeholder="password" class="$$input $$input-bordered" required /> <label class="$$label"> <a href="#" class="$$label-text-alt $$link $$link-hover">Forgot password?</a> </label> </div> <div class="$$form-control mt-6"> <button class="$$btn $$btn-primary">Login</button> </div> </form> </div> </div> </div>
<div class="$$hero bg-base-200 min-h-screen">
<div class="$$hero-content flex-col lg:flex-row-reverse">
<div class="text-center lg:text-left">
<h1 class="text-5xl font-bold">Login now!</h1>
<p class="py-6">
Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem
quasi. In deleniti eaque aut repudiandae et a id nisi.
</p>
</div>
<div class="$$card bg-base-100 w-full max-w-sm shrink-0 shadow-2xl">
<form class="$$card-body">
<div class="$$form-control">
<label class="$$label">
<span class="$$label-text">Email</span>
</label>
<input type="email" placeholder="email" class="$$input $$input-bordered" required />
</div>
<div class="$$form-control">
<label class="$$label">
<span class="$$label-text">Password</span>
</label>
<input type="password" placeholder="password" class="$$input $$input-bordered" required />
<label class="$$label">
<a href="#" class="$$label-text-alt $$link $$link-hover">Forgot password?</a>
</label>
</div>
<div class="$$form-control mt-6">
<button class="$$btn $$btn-primary">Login</button>
</div>
</form>
</div>
</div>
</div>
<div class="$$hero bg-base-200 min-h-screen">
<div class="$$hero-content flex-col lg:flex-row-reverse">
<div class="text-center lg:text-left">
<h1 class="text-5xl font-bold">Login now!</h1>
<p class="py-6">
Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem
quasi. In deleniti eaque aut repudiandae et a id nisi.
</p>
</div>
<div class="$$card bg-base-100 w-full max-w-sm shrink-0 shadow-2xl">
<form class="$$card-body">
<div class="$$form-control">
<label class="$$label">
<span class="$$label-text">Email</span>
</label>
<input type="email" placeholder="email" class="$$input $$input-bordered" required />
</div>
<div class="$$form-control">
<label class="$$label">
<span class="$$label-text">Password</span>
</label>
<input type="password" placeholder="password" class="$$input $$input-bordered" required />
<label class="$$label">
<a href="#" class="$$label-text-alt $$link $$link-hover">Forgot password?</a>
</label>
</div>
<div class="$$form-control mt-6">
<button class="$$btn $$btn-primary">Login</button>
</div>
</form>
</div>
</div>
</div>
<div class="$$hero bg-base-200 min-h-screen">
<div class="$$hero-content flex-col lg:flex-row-reverse">
<div class="text-center lg:text-left">
<h1 class="text-5xl font-bold">Login now!</h1>
<p class="py-6">
Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem
quasi. In deleniti eaque aut repudiandae et a id nisi.
</p>
</div>
<div class="$$card bg-base-100 w-full max-w-sm shrink-0 shadow-2xl">
<form class="$$card-body">
<div class="$$form-control">
<label class="$$label">
<span class="$$label-text">Email</span>
</label>
<input type="email" placeholder="email" class="$$input $$input-bordered" required />
</div>
<div class="$$form-control">
<label class="$$label">
<span class="$$label-text">Password</span>
</label>
<input type="password" placeholder="password" class="$$input $$input-bordered" required />
<label class="$$label">
<a href="#" class="$$label-text-alt $$link $$link-hover">Forgot password?</a>
</label>
</div>
<div class="$$form-control mt-6">
<button class="$$btn $$btn-primary">Login</button>
</div>
</form>
</div>
</div>
</div>Hello there
Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.
<div class="$$hero min-h-screen" style="background-image: url(https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp);"> <div class="$$hero-overlay"></div> <div class="$$hero-content text-neutral-content text-center"> <div class="max-w-md"> <h1 class="mb-5 text-5xl font-bold">Hello there</h1> <p class="mb-5"> Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi. </p> <button class="$$btn $$btn-primary">Get Started</button> </div> </div> </div>
<div
class="$$hero min-h-screen"
style="background-image: url(https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp);">
<div class="$$hero-overlay"></div>
<div class="$$hero-content text-neutral-content text-center">
<div class="max-w-md">
<h1 class="mb-5 text-5xl font-bold">Hello there</h1>
<p class="mb-5">
Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem
quasi. In deleniti eaque aut repudiandae et a id nisi.
</p>
<button class="$$btn $$btn-primary">Get Started</button>
</div>
</div>
</div>
<div
class="$$hero min-h-screen"
style={{
backgroundImage: "url(https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp)",
}}>
<div class="$$hero-overlay"></div>
<div class="$$hero-content text-neutral-content text-center">
<div class="max-w-md">
<h1 class="mb-5 text-5xl font-bold">Hello there</h1>
<p class="mb-5">
Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem
quasi. In deleniti eaque aut repudiandae et a id nisi.
</p>
<button class="$$btn $$btn-primary">Get Started</button>
</div>
</div>
</div>
<div
class="$$hero min-h-screen"
style={{
backgroundImage: "url(https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp)",
}}>
<div class="$$hero-overlay"></div>
<div class="$$hero-content text-neutral-content text-center">
<div class="max-w-md">
<h1 class="mb-5 text-5xl font-bold">Hello there</h1>
<p class="mb-5">
Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem
quasi. In deleniti eaque aut repudiandae et a id nisi.
</p>
<button class="$$btn $$btn-primary">Get Started</button>
</div>
</div>
</div>Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like daisyUI? tweet about it!
Support daisyUI's development: Open Collective
