90 lines
2.7 KiB
Markdown
90 lines
2.7 KiB
Markdown
# 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
|
|
|
|
```html
|
|
<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
|
|
|
|
```html
|
|
<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
|
|
|
|
```html
|
|
<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
|
|
|
|
```html
|
|
<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.
|