Content Wall
Can include Teaser, Quote, Content Reference and Media Reference blocks. Title can be hidden.
Example
Row's title visually hidden
Row's title visually hidden
-
News
Red Nose Day is coming soon to BBC One
-
Row's title visually hidden
-
Jo's Top Tip
Top-up your fundraising total with a classic, pay-to-play, 'guess the weight of the cake' competition.
-
Relive all the best bits of last Red Nose Day
20:20
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.
Row's title can be hidden
-
-
Relive all the best bits of last Red Nose Day
20:20
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.
-
Jo's Top Tip
Top-up your fundraising total with a classic, pay-to-play, 'guess the weight of the cake' competition.
Markup: components/content-wall/content-wall.twig
<section class="view-mode-default content-wall paragraph">
<h2 class="content-wall__title visuallyhidden">
Row's title visually hidden
</h2>
<div class="clearfix cw-region">
<div class="item-list">
<ul>
<li>
<article class="block-content--view-mode-cw-l teaser-block teaser-block--bg-image clearfix">
<a class="teaser-block__link" href="#">
<div class="teaser-block__image">
<img src="kss-assets/images/original-teaser-1170-658.jpg" alt="test">
</div>
<div class="teaser-block__body bg--white">
<div class="cr-body">
<h4>Get ideas, tips and tools to help you fundraise</h4>
<div class="teaser-block__cta">
<span class="btn btn--red">Pre-order a Kit</span>
</div>
</div>
</div>
</a>
</article>
</li>
</ul>
</div>
</div>
</section>
<section class="view-mode-default content-wall paragraph">
<h2 class="content-wall__title visuallyhidden">
Row's title visually hidden
</h2>
<div class="clearfix cw-region">
<div class="item-list">
<ul>
<li>
<article class="contextual-region block-content block-content--type-content-reference-block block-content--view-mode-cw-m 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--yellow font--font-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>
</li>
<li>
<article class="block-content--view-mode-cw-m teaser-block clearfix">
<a class="teaser-block__link" href="#">
<div class="teaser-block__image">
<img src="kss-assets/images/original-teaser-1170-658.jpg" alt="test">
</div>
<div class="teaser-block__body bg--white">
<div class="cr-body">
<h4>Get ideas, tips and tools to help you fundraise</h4>
<div class="teaser-block__cta">
<span class="btn btn--red">Pre-order a Kit</span>
</div>
</div>
</div>
</a>
</article>
</li>
</ul>
</div>
</div>
</section>
<section class="view-mode-default content-wall paragraph">
<h2 class="content-wall__title visuallyhidden">
Row's title visually hidden
</h2>
<div class="clearfix cw-region">
<div class="item-list">
<ul>
<li>
<article class="block-content--view-mode-cw-s cw-quote clearfix">
<div class="cw-quote__outer-wrapper">
<div class="cw-quote__bg-image">
<img src="kss-assets/images/pattern.gif" alt="test" typeof="foaf:Image">
</div>
<div class="cw-quote__inner-wrapper">
<div class="cw-quote__image bg--purple">
<img src="kss-assets/images/silhouette.png" alt="test" typeof="foaf:Image">
</div>
<div class="cw-quote__body">
<h3 class="font--yellow">Jo's Top Tip</h3>
<h4 class="font--yellow">Top-up your fundraising total with a classic, pay-to-play, 'guess the weight of the cake' competition.</h4>
</div>
</div>
</div>
</article>
</li>
<li>
<article class="contextual-region block-content block-content--type-media-reference block-content--view-mode-cw-mp 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>
</li>
</ul>
</div>
</div>
</section>
<section class="view-mode-default content-wall paragraph">
<h2 class="content-wall__title">
Row's title can be hidden
</h2>
<div class="clearfix cw-region">
<div class="item-list">
<ul>
<li>
<article class="block-content--view-mode-cw-s teaser-block clearfix">
<a class="teaser-block__link" href="#">
<div class="teaser-block__image">
<img src="kss-assets/images/original-teaser-1170-658.jpg" alt="test">
</div>
<div class="teaser-block__body bg--white">
<h4>Get ideas, tips and tools to help you fundraise</h4>
<div class="teaser-block__cta">
<span class="btn btn--red">Pre-order a Kit</span>
</div>
</div>
</a>
</article>
</li>
<li>
<article class="contextual-region block-content block-content--type-media-reference block-content--view-mode-cw-s 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>
</li>
<li>
<article class="block-content--view-mode-cw-s cw-quote clearfix">
<div class="cw-quote__outer-wrapper">
<div class="cw-quote__bg-image">
<img src="kss-assets/images/pattern.gif" alt="test" typeof="foaf:Image">
</div>
<div class="cw-quote__inner-wrapper">
<div class="cw-quote__image bg--purple">
<img src="kss-assets/images/silhouette.png" alt="test" typeof="foaf:Image">
</div>
<div class="cw-quote__body">
<h3 class="font--yellow">Jo's Top Tip</h3>
<h4 class="font--yellow">Top-up your fundraising total with a classic, pay-to-play, 'guess the weight of the cake' competition.</h4>
</div>
</div>
</div>
</article>
</li>
</ul>
</div>
</div>
</section>
Source:
base-styleguide.scss
, line 317