### hero

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

[hero docs](https://daisyui.com/components/hero/)

#### Class names

- component: `hero`
- part: `hero-content`, `hero-overlay`

#### Syntax

```html
<div class="hero {MODIFIER}">{CONTENT}</div>
```

#### Rules

- {MODIFIER} is optional
- Use `hero-content` for the text content
- Use `hero-overlay` inside the hero to overlay the background image with a color
- Content can contain a figure