Media Reference Block
Comes in 4 sizes.
Examples
Default styling
Relive all the best bits of last Red Nose Day
20:20
.block-content--view-mode-cw-s
Small
Relive all the best bits of last Red Nose Day
20:20
.block-content--view-mode-cw-m
Medium
Relive all the best bits of last Red Nose Day
20:20
.block-content--view-mode-cw-mp
Medium Plus
Relive all the best bits of last Red Nose Day
20:20
.block-content--view-mode-cw-l
Large
Relive all the best bits of last Red Nose Day
20:20
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