Usage
Use .hero to create a flexible hero section.
Although hero section elements are simple and can be used in a variety of contexts, those used on the Home page of our themes typically contain configurable background images, colors and headings. Shape dividers and popular search terms can also be added using theme settings.
Hero section with background
Background settings
| Name | Description |
|---|---|
| Home hero image | The background image to use for the hero section on the Home page. |
| Hero background color 1 | The primary hero background color. |
| Hero background color 2 | The secondary hero background color. |
| Hero background gradient | Determines how the two colors above are used. |
| Hero image style | Determines how the underlying hero background image should be displayed. |
The background image will be visible if one or more of the background colors are semi-transparent or the Hero image style setting is set to “Overlay”.
Layout settings
| Name | Description |
|---|---|
| Hero shape divider | The shape divider, if any, to use at the bottom of the hero element. |
For examples of how hero sections can be used, refer to the Hero Sections page in our Pattern Library.