Content Reference Block
Comes in 4 sizes.
Examples
Default styling
News
Red Nose Day is coming soon to BBC One
.block-content--view-mode-cw-s
Small
News
Red Nose Day is coming soon to BBC One
.block-content--view-mode-cw-m
Medium
News
Red Nose Day is coming soon to BBC One
.block-content--view-mode-cw-mp
Medium Plus
News
Red Nose Day is coming soon to BBC One
.block-content--view-mode-cw-l
Large
News
Red Nose Day is coming soon to BBC One
Markup: components/content-block/content-block.twig
<div class="cw-region">
<article class="contextual-region block-content block-content--type-content-reference-block {{ modifier_class }} content-block clearfix">
<div class="content-block__image">
<div class="media media--blazy media--responsive media--image">
<picture>
<img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/original-teaser-1170-658.jpg" alt="Red nose day" typeof="foaf:Image">
</picture>
</div>
</div>
<div class="content-block__content-wrapper">
<div class="content-block__content">
<span class="content-block__tag font--mint-green font--family-black">News</span>
<h4>
Red Nose Day is coming soon to BBC One
</h4>
</div>
</div>
<a href="#" class="content-block__link" hreflang="en">Read more</a>
</article>
</div>
Source:
_cr17-styleguide.scss
, line 149