Hero

Default

Intended for display of visual feature content on homepage. Uses <picture> to provide varying aspect ratios based on display size, and srcset to serve different versions for different resolutions.

The image size may be constrained by applying a u-contain* utility to the Hero-link element. The overflow background color may be customized by applying a u-bg* utility to the Hero element.

Always provide alternative text for accessibility 
<div class="Hero ">
        <a class="Hero-link u-containPage" href="">
          <span class="Hero-ratio"></span>
          <picture>
            <source srcset="
              /images/prototypes/tcs/hero/cinema@2x.jpg 2x,
              /images/prototypes/tcs/hero/cinema.jpg"
              media="(min-width: 800px)">
            <source srcset="
              /images/prototypes/tcs/hero/2by1@2x.jpg 2x,
              /images/prototypes/tcs/hero/2by1.jpg"
              media="(min-width: 480px)">
            <img class="Hero-image"
              alt="Always provide alternative text for accessibility"
              src="/images/prototypes/tcs/hero/4by3.jpg"
              srcset="
                /images/prototypes/tcs/hero/4by3@2x.jpg 2x,
                /images/prototypes/tcs/hero/4by3.jpg">
          </picture>
        </a>
      </div>

Image Sizes

Breakpoint Width Height
Default 480 360
Default @2x 960 720
≥ 480px 800 400
≥ 480px @2x 1600 800
≥ 800px 1200 500
≥ 800px @2x 2400 1000

Standard resolution images should not use text smaller in size than 24px to insure readability regardless of scale. For @2x imagery, the minimum text size doubles to 48px.