# Hero

Source: https://iriscss.com/documentation/layout/hero/

A large intro band at the top of a page, with the content centered.

Add `.hero` to a `section` with a heading, a paragraph and buttons. The heading grows with the screen and the paragraph keeps a readable width.

```html
<section class="hero">
  <h1>Build with plain HTML</h1>
  <p>A CSS framework that styles your markup with no classes and no JavaScript.</p>
  <div class="cluster justify-center">
    <button class="primary">Get started</button>
    <button class="outlined">Documentation</button>
  </div>
</section>
```

## Colors

A [color class](https://iriscss.com/documentation/modifiers/colors/index.html.md) fills the hero, like any element.

```html
<section class="hero primary">
  <h2>Spring sale</h2>
  <p>Every plan is 30% off this week.</p>
  <div><button class="contrast">See plans</button></div>
</section>
```

## Gradient

Combine it with a [gradient](https://iriscss.com/documentation/helpers/gradients/index.html.md) for a richer background.

```html
<section class="hero gradient indigo" data-theme="dark">
  <h2>Iris CSS</h2>
  <p>Modern CSS, no build step.</p>
</section>
```

## Variables

| Variable | Default |
| --- | --- |
| `--i-hero-min-height` | `min(60svh, 32rem)` |
| `--i-hero-padding-block` | `calc(var(--i-spacing) * 4)` |
| `--i-hero-font-size` | `clamp(2.25rem, 1.5rem + 3svw, 3.5rem)` |
| `--i-hero-text-font-size` | `1.25rem` |
| `--i-hero-text-max-width` | `40rem` |