Examples
Default styling
Video background

Relive all the best bits of last Red Nose Day

20:20

media block

Raymond used to work in a mine, with no time to go to school. Now, thanks to you, he’s getting an education. To help us change more lives, simply raise cash by having fun.

See how to join in

.block-content--view-mode-cw-s
Small
Video background

Relive all the best bits of last Red Nose Day

20:20

media block

Raymond used to work in a mine, with no time to go to school. Now, thanks to you, he’s getting an education. To help us change more lives, simply raise cash by having fun.

See how to join in

.block-content--view-mode-cw-m
Medium
Video background

Relive all the best bits of last Red Nose Day

20:20

media block

Raymond used to work in a mine, with no time to go to school. Now, thanks to you, he’s getting an education. To help us change more lives, simply raise cash by having fun.

See how to join in

.block-content--view-mode-cw-mp
Medium Plus
Video background

Relive all the best bits of last Red Nose Day

20:20

media block

Raymond used to work in a mine, with no time to go to school. Now, thanks to you, he’s getting an education. To help us change more lives, simply raise cash by having fun.

See how to join in

.block-content--view-mode-cw-l
Large
Video background

Relive all the best bits of last Red Nose Day

20:20

media block

Raymond used to work in a mine, with no time to go to school. Now, thanks to you, he’s getting an education. To help us change more lives, simply raise cash by having fun.

See how to join in

Markup: components/media-block/media-block.twig
<div class="cw-region">
  <article class="contextual-region block-content block-content--type-media-reference {{ modifier_class }} media-block clearfix">
    <div class="media-block__image">
      <div class="media media--blazy  media--responsive media--image">
        <picture>
          <img class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/original-teaser-1170-658.jpg" alt="Video background" typeof="foaf:Image">
        </picture>
      </div>
    </div>
    <div class="media-block__content-wrapper">
      <div class="media-block__content">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="play-icon" viewBox="0 0 40 40" xml:space="preserve">
          <path d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20S10.1,2,20,2 M20,0C9,0,0,9,0,20s9,20,20,20
            s20-9,20-20S31,0,20,0L20,0z"></path>
          <path d="M15.8,14l10.3,6l-10.3,6V14 M13.8,10.6v18.8L30.1,20L13.8,10.6L13.8,10.6z"></path>
        </svg>
        <div class="cr-body">
          <h4>Relive all the best bits of last Red Nose Day</h4>
          <p class="font--yellow"><strong>20:20</strong></p>
        </div>
      </div>
    </div>
    <a class="media-block__link" data-rel="lightcase" href="https://www.youtube.com/embed/NW12S4-KB1I?autoplay=1">media block</a>
    <div class="media-block__caption">
      <div class="cr-body">
        <p>Raymond used to work in a mine, with no time to go to school. Now, thanks to you, he’s getting an education. To help us change more lives, simply raise cash by having fun.</p>
        <p><a class="btn btn--red" href="#">See how to join in</a></p>
      </div>
    </div>
  </article>
</div>
Source: base-styleguide.scss, line 296