Example

The difference you make

There are some incredible projects, in the UK and Africa, that have found effective ways to tackle poverty and injustice. Your money means we can choose the best and then fund them.

Africa
Markup: components/promo-header/promo-header.twig
<header class="bg--black promo-header promo-header__header promo-header--default {{modifier_class}}">
   <div class="promo-header__content">
      <div class="promo-header__content-inner promo-header__content-inner--left">
         <h1 class="font--yellow">The difference you make</h1>
         <p class="font--xlarge">There are some incredible projects, in the UK and Africa, that have found effective ways to tackle poverty and injustice. Your money means we can choose the best and then fund them.</p>
      </div>
   </div>
   <div class="promo-header__bg-image">
      <picture>
         <source srcset="kss-assets/images/promo-header-1170-450.jpg" media="all and (min-width: 1024px)" type="image/jpeg">
         <source srcset="kss-assets/images/promo-header-740-450.jpg" media="all and (min-width: 740px)" type="image/jpeg">
         <source srcset="kss-assets/images/promo-header-740-450.jpg" media="(min-width: 0px)" type="image/jpeg">
         <img srcset="kss-assets/images/promo-header-1170-450.jpg" alt="Africa" typeof="foaf:Image">
     </picture>
   </div>
</header>
Source: _cr19-styleguide.scss, line 313