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.