Hero renders a full-width centred section with content and an optional overlay image. Use it for landing pages, empty states, or feature sections that need prominent visual presence.

Basic Hero

Preview

Hello there

Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi.

Code

<c-lb.hero class="bg-base-200 min-h-64">
  <c-lb.hero.content class="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.</p>
      <button class="btn btn-primary">Get Started</button>
    </div>
  </c-lb.hero.content>
</c-lb.hero>

Hero with Image

Preview

New Arrival!

Step into style with our latest collection of premium sneakers. Designed for comfort, built for performance.

Code

<c-lb.hero class="bg-base-200 min-h-64">
  <c-lb.hero.content class="flex-col lg:flex-row-reverse">
    <img src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp" class="max-w-sm rounded-lg shadow-2xl" />
    <div>
      <h1 class="text-5xl font-bold">New Arrival!</h1>
      <p class="py-6">Step into style with our latest collection of premium sneakers. Designed for comfort, built for performance.</p>
      <c-lb.button variant="primary">Shop Now</c-lb.button>
    </div>
  </c-lb.hero.content>
</c-lb.hero>

Hero with Overlay

Preview

Hello there

Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi.

Code

<c-lb.hero class="min-h-64" overlay style="background-image: url(https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp);">
  <c-lb.hero.content class="text-neutral-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.</p>
      <button class="btn btn-primary">Get Started</button>
    </div>
  </c-lb.hero.content>
</c-lb.hero>

API Reference

`c-lb.hero`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply
overlay	boolean	`False`	No	Show hero overlay for background images

Slot Name	Description
default	Hero content

`c-lb.hero.content`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply

Slot Name	Description
default	Hero content elements

`c-lb.hero.overlay`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply