Hero

Hero is a component for displaying a large box or image with a title and description.

Class name		Type
hero
Component
Hero container
hero-content
Part
content part
hero-overlay
Part
Overlay that covers the background image

Centered hero

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>

Hero with figure

Tailwind CSS hero component

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>

Hero with figure but reverse order

Tailwind CSS hero component

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>

Hero with form

Login now!

Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.

Forgot password?
<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">
      <div class="$$card-body">
        <fieldset class="$$fieldset">
          <label class="$$label">Email</label>
          <input type="email" class="$$input" placeholder="Email" />
          <label class="$$label">Password</label>
          <input type="password" class="$$input" placeholder="Password" />
          <div><a class="$$link $$link-hover">Forgot password?</a></div>
          <button class="$$btn $$btn-neutral mt-4">Login</button>
        </fieldset>
      </div>
    </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">
      <div class="$$card-body">
        <fieldset class="$$fieldset">
          <label class="$$label">Email</label>
          <input type="email" class="$$input" placeholder="Email" />
          <label class="$$label">Password</label>
          <input type="password" class="$$input" placeholder="Password" />
          <div><a class="$$link $$link-hover">Forgot password?</a></div>
          <button class="$$btn $$btn-neutral mt-4">Login</button>
        </fieldset>
      </div>
    </div>
  </div>
</div>

Hero with overlay 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 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>
Do you have a question? Ask on GitHub or Discord server
Do you see a bug? open an issue on GitHub
Do you like daisyUI? Post about it!
Support daisyUI's development: Open Collective
daisyUI store

NEXUS
Official daisyUI Dashboard Template

Available on daisyUI store

More details
Please upgrade your browser