Skip to content

Usage

<header class="hero theme">
  <img src="/images/hero/img.webp" alt="" />

  <div class="hero-content">
    <div class="l-center" style="--cr-max-width: var(--bp-40)">
      <div class="u-gutter">
        <div class="l-stack" style="color: var(--white); text-align: center; ">
          <h1>Article Title</h1>
          <p style="font-size: var(--s2); max-width: 55ch">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ex est
            sequi aperiam libero possimus dolorum, aliquid, iste eaque nisi hic
            autem.
          </p>
          <a href="/" class="button theme" style="margin-inline: auto;"
            >Learn More</a
          >
        </div>
      </div>
    </div>
  </div>
</header>

Content

The text content determines the height. The custom property --hero-min-height allows for setting a minimum height on the content. This ensures the hero can expand as needed.

Image

This approach uses an <img> tag set to object-fit: cover so that it fills the available space. This allows us to take advantage of the responsive features available.

  • The srcset and sizes attributes provides the browser with information needed to choose the appropriate image image given the device and network speed.
  • The fetchpriority='high' attribute informs the browser that this image should be loaded as quickly as possible.
  • Note, leaving an empty alt tag indicates to browser/user that image is decorative, will not be announced via screenreader. It will be treated like an image.