Options

Overlay title

Lorem ipsum dolor sit amet...

<div class="aspect-ratio-16x9 relative">

  <!-- The hero image -->
  <img class="box img-cover" src="" width="" height="" loading="lazy" alt="">

  <!-- The hero overlay -->
  <div class="aspect-ratio-16x9 flex flex-center flex-middle">
    <div class="m-4 p-2 xs:p-6 bg-white-glass-3 t-center t-lg">
      <h1 class="t-semibold t-black">Overlay title</h1>
      <p class="mb-0 t-black">Lorem ipsum dolor sit amet...</p>
    </div>
  </div>
  
</div>

Notes on heros

1. The hero dimensions can be set to anything but there are a number of aspect ratio wrapper utility class. Alternatively we can set a min-height on the wrapper.
2. When necessary on small viewports, aspect-ratio-* wrappers will vertically deform to accommodate the content of their immediate child element so longer titles etc. shouldn't break up on small devices.
3. The hero image needs CSS classes box img-cover.
4. The overlay also needs the same aspect-ratio wrapper so that it expands to cover the image. Then you can use flexbox to position your overlay panel anywhere you want (the example here is centered and middled).
5. You will need a big enough image, of course, with its most important content in its center and middle, so that it is not “cropped off”. Any the image will need to be square or approximately square. For the reason why – see cover images.
6. Also, you will need to figure out what colour is best for the text over your choice of image, for the obtaining the best legibility. Usually I use the t-black utility over light images and t-white over dark images. And, if you are struggling to read your hero title and/or other text over your image, there are a few options that you can explore:
   • Darken your image behind white text, or lighen your image behind black text.
   • Make your image grayscale (or other color scale), or blurred. Carbon contains grayscale and blur CSS filters.
   • Give your text a text shadow. (The text shadow needs to be dark over a dark image and light over a light image.)
   • Try a Carbon glass overlay behind your text.

Implementation

Overlay title

Lorem ipsum dolor sit amet...

<div class="aspect-ratio-16x9 relative">

  <!-- The hero image -->
  <img class="box img-cover" src="" width="" height="" loading="lazy" alt="">

  <!-- The hero overlay -->
  <div class="aspect-ratio-16x9 flex flex-center flex-middle">
    <div class="m-4 p-2 xs:p-6 bg-white-glass-3 t-center t-lg">
      <h1 class="t-semibold t-black">Overlay title</h1>
      <p class="mb-0 t-black">Lorem ipsum dolor sit amet...</p>
    </div>
  </div>
  
</div>

Notes on heros

1. The hero dimensions can be set to anything but there are a number of aspect ratio wrapper utility class. Alternatively we can set a min-height on the wrapper.
2. When necessary on small viewports, aspect-ratio-* wrappers will vertically deform to accommodate the content of their immediate child element so longer titles etc. shouldn't break up on small devices.
3. The hero image needs CSS classes box img-cover.
4. The overlay also needs the same aspect-ratio wrapper so that it expands to cover the image. Then you can use flexbox to position your overlay panel anywhere you want (the example here is centered and middled).
5. You will need a big enough image, of course, with its most important content in its center and middle, so that it is not “cropped off”. Any the image will need to be square or approximately square. For the reason why – see cover images.
6. Also, you will need to figure out what colour is best for the text over your choice of image, for the obtaining the best legibility. Usually I use the t-black utility over light images and t-white over dark images. And, if you are struggling to read your hero title and/or other text over your image, there are a few options that you can explore:
   • Darken your image behind white text, or lighen your image behind black text.
   • Make your image grayscale (or other color scale), or blurred. Carbon contains grayscale and blur CSS filters.
   • Give your text a text shadow. (The text shadow needs to be dark over a dark image and light over a light image.)
   • Try a Carbon glass overlay behind your text.

Information Tab

Checklist