Skip to main content


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 H1 with 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

No Description

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



  1. Hero
  2. Hero Heading (H1)
  3. Hero Description
  4. Hero Image
Hero Anatomy