email-organizer/offline-docs/daisyui/hero.md

daisyUI Documentation - Hero Component

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

Classes and Usage

Core Classes:

• hero - The main hero component
• hero-content - Content container inside hero
• hero-overlay - Overlay for hero background
• hero-center - Centers content in hero
• hero-start - Aligns content to start
• hero-end - Aligns content to end
• hero-text - Text content styling
• hero-image - Image container styling

Examples

Basic Hero

<div class="hero bg-base-200">
  <div class="hero-content text-center">
    <div class="max-w-md">
      <h1 class="text-5xl font-bold">Welcome to daisyUI!</h1>
      <p class="py-6">Providing useful component class names to help you write less code and build faster.</p>
      <button class="btn btn-primary">Get Started</button>
    </div>
  </div>
</div>

Hero with Image

<div class="hero bg-base-200">
  <div class="hero-content flex-col lg:flex-row">
    <div class="lg:w-1/2">
      <img src="https://img.daisyui.com/images/stock/photo-1635805737707-57588507996c.webp" class="rounded-lg shadow-2xl" />
    </div>
    <div class="lg:w-1/2">
      <h1 class="text-5xl font-bold">Your Title Here!</h1>
      <p class="py-6">With the Hero component, you can easily create a large banner area with text and images.</p>
      <button class="btn btn-primary">Get Started</button>
    </div>
  </div>
</div>

Hero with Overlay

<div class="hero bg-base-200">
  <div class="hero-overlay bg-opacity-60"></div>
  <div class="hero-content text-center text-neutral-content">
    <div class="max-w-md">
      <h1 class="text-5xl font-bold">Welcome!</h1>
      <p class="py-6">This hero has an overlay to make the text more readable.</p>
      <button class="btn btn-primary">Get Started</button>
    </div>
  </div>
</div>

Hero with Background Image

<div class="hero bg-[url('https://img.daisyui.com/images/stock/photo-1635805737707-57588507996c.webp')] bg-cover">
  <div class="hero-overlay bg-base-200 bg-opacity-60"></div>
  <div class="hero-content text-center text-neutral-content">
    <div class="max-w-md">
      <h1 class="text-5xl font-bold">Background Image Hero</h1>
      <p class="py-6">This hero uses a background image with overlay.</p>
      <button class="btn btn-primary">Get Started</button>
    </div>
  </div>
</div>

Features

• Large banner area for showcasing content
• Responsive design that works on all screen sizes
• Can include images and text
• Supports overlays for better readability
• Flexible layout options (flex-col, lg:flex-row)
• Customizable with Tailwind classes

This component is useful for creating attention-grabbing introductory sections on websites.