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.
Build with plain HTML
A CSS framework that styles your markup with no classes and no JavaScript.
Colors
A color class fills the hero, like any element.
Spring sale
Every plan is 30% off this week.
Gradient
Combine it with a gradient for a richer background.
Iris CSS
Modern CSS, no build step.
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 |