A hero is one of the first things people see when they visit our sites. It can contain a heading, description and image.
- A hero is required to be at the top of all standard pages, category pages, search pages (but not posts).
- Hero styles vary depending on the theme and page, but the markup should remain similar.
- The hero contains an
H1with the page title, and optionally an image and description.
- The hero image can optionally contain a separate image for mobile, and desktop.
- This example is based on WalletGenius.
States & Variations
If there is no description added, the CSS grid layout will need to be changed to accomodate. JS will automatically add the required CSS class of
hero--no-description if it's missing.
No Image or Description
- Hero Heading (H1)
- Hero Description
- Hero Image