A hero is one of the first things people see when they visit our sites. It can contain a heading, description and image.

Demo

Investing

Everyone knows that saving money is the key to retirement but what’s the real secret to success? Let us teach you the basics of investing...

<section class="hero">
  <h1 class="hero__heading">Investing</h1>
  <p class="hero__description">Everyone knows that saving money is the key to retirement but what’s the real secret to success? Let us teach you the basics of investing...</p>        
  <picture class="hero__image">
    <source srcset="https://walletgenius.com/walletgenius/wp-content/uploads/2021/09/Investing-168-x168.png" media="(min-width: 0) and (max-width: 767px)">
    <source srcset="https://walletgenius.com/walletgenius/wp-content/uploads/2021/09/Investing-1478-x-652_comp-1.png" media="(min-width: 768px)">
    <img src="https://walletgenius.com/walletgenius/wp-content/uploads/2021/09/Investing-1478-x-652_comp-1.png" loading="lazy" decoding="async" height="359.87" width="800" alt="">
  </picture>
</section>

.hero {
  display: grid;
  grid: max-content 1fr / minmax(var(--gutter), 1fr) minmax(0, 82.25rem) minmax(0, 5.25rem) minmax(var(--gutter), 1fr);
  grid-template-areas:
  ". hero-heading hero-image ."
  ". hero-description hero-description .";
  padding: clamp(0.5rem, 5vw, 6.5rem) 0 clamp(0.25rem, 2vw, 2rem) 0;
  position: relative;

  &:before {
    background: transparent linear-gradient(180deg, #E6F4F0 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
    block-size: 100%;
    content: "";
    inline-size: 100%;
    inset-block-start: 0;
    inset-inline-start: 0;
    pointer-events: none;
    position: absolute;
    z-index: -1;
  }

  &__heading {
    align-self: center;
    font-size: clamp(1.75rem, 3.5vw, 3rem);
    grid-area: hero-heading;
    line-height: 1.15;
    margin-block-end: 0;
    padding-block-end: 0.55em;
    position: relative;

    &:after {
      background: var(--primary);
      block-size: .3125rem;
      content: "";
      inline-size: 10.1875rem;
      inset-block-end: 0;
      inset-inline-start: 0;
      position: absolute;
    }
  }

  &__description {
    grid-area: hero-description;
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.45;
    margin: 1rem 0 0 0;
  }

  &__image {
    align-self: end;
    grid-area: hero-image;
    justify-self: end;
    margin-block-end: 0;
  }
}

@media (min-width: $sm) {
  .hero {
    &__heading {
      max-inline-size: 78%;
    }
  }
}

@media (min-width: $md) {
  .hero {
    grid-template-areas:
    ". hero-heading hero-image ."
    ". hero-description hero-image .";
    grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, 40rem) minmax(0, 47.5rem) minmax(var(--gutter), 1fr);

    &--no-description {
      grid-template-areas:
      ". hero-heading hero-image .";
    }

    &__heading {
      align-self: start;
      line-height: 1.1;
      max-inline-size: 100%;
      padding-block-end: 0.5em;

      &:after {
        block-size: .4375rem;
      }

      .hero--no-description & {
        align-self: center;
      }
    }

    &__description {
      line-height: 1.5;
      margin-block-start: 1.35rem;
    }

    &__image {
      align-self: center;
      max-inline-size: 42rem;
      padding-inline-start: 5%;
    }
  }
}

@media (min-width: $xxl) {
  .hero-component {
    max-block-size: 27.5rem;
    
    &__description {
      margin-block-start: 2rem;
    }

    &__heading {
      max-inline-size: 38rem;
    }
  }
}

No JS! 😀

Note

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.

Investing

<section class="hero hero--no-description">
  <h1 class="hero__heading">Investing</h1>
  <picture class="hero__image">
    <source srcset="https://walletgenius.com/walletgenius/wp-content/uploads/2021/09/Investing-168-x168.png" media="(min-width: 0) and (max-width: 767px)">
    <source srcset="https://walletgenius.com/walletgenius/wp-content/uploads/2021/09/Investing-1478-x-652_comp-1.png" media="(min-width: 768px)">
    <img src="https://walletgenius.com/walletgenius/wp-content/uploads/2021/09/Investing-1478-x-652_comp-1.png" loading="lazy" decoding="async" height="359.87" width="800" alt="">
  </picture>
</section>

No Image or Description

Investing

<section class="hero hero--no-description">
  <h1 class="hero__heading">Investing</h1>
</section>

Anatomy

Hero
Hero Heading (H1)
Hero Description
Hero Image

Hero

Demo

Investing

Note

States & Variations

No Description

Investing

No Image or Description

Investing

Anatomy