Content Wall

Can include Teaser, Quote, Content Reference and Media Reference blocks. Title can be hidden.

Example

Row's title visually hidden

Get ideas, tips and tools to help you fundraise

Pre-order a Kit

Row's title visually hidden

News
Red Nose Day is coming soon to BBC One

Read more
Get ideas, tips and tools to help you fundraise

Pre-order a Kit

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

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

Row's title can be hidden

Get ideas, tips and tools to help you fundraise

Pre-order a Kit
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
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: _sr18-styleguide.scss, line 457

Best Auction Ever - raising money for Red Nose Day

Posted: 12/10/2017

Katy enjoys a quick break on her way to make her first delivery - photo credit

Markup: components/news-article/news-article.twig

<article class="cr-article">
  <div class="cr-article__content-wrapper">
	  <header class="node node--type-article node--view-mode-full cr-article__header cr-article__header--no-caption">
	    <h1 class="cr-article__title">Best Auction Ever - raising money for Red Nose Day</h1>
	    <span class="cr-article__date">
	      <div class="field__label visually-hidden">Display date</div>
	      Posted: 12/10/2017
	      </span>
        <div class="cr-article__social-links">
  	      <div class="social-links-label">
  	        <span>Share with:</span>
  	      </div>
  	      <div class="item-list"><ul class="social-links"><li><a href="http://twitter.com/home?status=http%3A%2F%2Fwww.rednoseday.com%2Fnews-tv-and-events%2Fnews%2Fbest-auction-ever-raising-money-red-nose-day&amp;amp;title=Best+Auction+Ever+-+raising+money+for+Red+Nose+Day" title="Share on Twitter" class="social-link twitter-social-link social-link-popup SocialPopup-processed"><svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#social-link-twitter"></use></svg></a></li><li>
            <a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.rednoseday.com%2Fnews-tv-and-events%2Fnews%2Fbest-auction-ever-raising-money-red-nose-day&amp;amp;title=Best+Auction+Ever+-+raising+money+for+Red+Nose+Day" title="Share on Facebook" class="social-link facebook-social-link social-link-popup SocialPopup-processed"><svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#social-link-facebook"></use></svg></a></li></ul></div>
  	    </div>
	      	<div class="cr-article__image">
	        <picture>
				    <source srcset="kss-assets/images/16-9-img.jpg" media="all and (min-width: 1024px)" type="image/jpeg">
				    <source srcset="kss-assets/images/16-9-img.jpg" media="all and (min-width: 740px)" type="image/jpeg">
				    <source srcset="kss-assets/images/16-9-img.jpg" media="(min-width: 0px)" type="image/jpeg">
				  	<img srcset="kss-assets/images/16-9-img.jpg" alt="Africa" typeof="foaf:Image">
				  </picture>
	    	</div>
        <figcaption class="cr-article__caption">
            Katy enjoys a quick break on her way to make her first delivery - photo credit
        </figcaption>
	  </header>
  </div>
</article>

Source: _sr18-styleguide.scss, line 466

Best Auction Ever - raising money for Red Nose Day

17 March 2017

Over 20 remarkable celebrity, film and television experiences and items are up for grabs in the #BestAuctionEver and prize draw give-away for Red Nose Day.

Would you like a chat with Ed Sheeran backstage at one of his shows? Get involved.
Have you ever dreamt of flying to LA to hang out with James Corden at his chat show? He’s right there waiting for you.
Doctor Who fans, have you ever wondered what it would be like to sit down for brunch with not one, not two, but seven, Doctors? Wonder no more.
Feel like hanging out with the Formula 1 drivers at British Grand Prix week, while being given racing tips by Geri Horner? Now’s your chance.

And not only that…

Claudia Winkleman is asking you to join her for a fringe trim and spray tan.
Five Masterchef winners want to come to your house to cook you dinner.
Miranda Hart is hoping to take you for a gallop down The Strand.
Little Mix are ready and waiting to skype you.
Jamie Oliver and Michel Roux are longing to teach you to cook.
Gareth Malone is up for a singing lesson.
James Rhodes would like to play the piano in your house for 20 of your friends.
Richard Curtis is waiting to give you a part in his next movie.
Gillian Anderson wants to join you for a wander around the Tate Modern.
Davina is looking for a private work out pal.
Tom Fletcher is all set to come to your house for a story and a sing-song.
Baking legends, Mary Berry and Nadiya Hussein are in the kitchen wishing to make you a cake.
Tanya Burr is excited to take you on a shopping spree with £1,000 to spend on you.
Kirstie Allsopp is inviting you and your friends to her incredibly beautiful seaside house in Devon.
Sofie Gråbøl has had enough of the jumper she wore in The Killing and would like you to have it instead.

10 of these amazing experiences will also be up for grabs as part of a very special series of prize draws, so if bidding isn’t your thing, just £5 means you can enter online to be in with a chance of bagging yourself a once-in-a-lifetime experience.

Get bidding now and help raise some serious life-changing cash this Red Nose Day.

See all items

Markup: components/news-article/press-release-article.twig

<div class="page-node-type-article--press-release">
	<article class="cr-article">
	  <div class="cr-article__content-wrapper">
		  <header class="node node--type-article node--view-mode-full cr-article__header cr-article__header--no-caption">
		    <div class="cr-article__social-links">
		      <div class="social-links-label">
		        <span>Share with:</span>
		      </div>
		      <div class="item-list"><ul class="social-links"><li><a href="http://twitter.com/home?status=http%3A%2F%2Fwww.rednoseday.com%2Fnews-tv-and-events%2Fnews%2Fbest-auction-ever-raising-money-red-nose-day&amp;amp;title=Best+Auction+Ever+-+raising+money+for+Red+Nose+Day" title="Twitter" class="social-link twitter-social-link social-link-popup SocialPopup-processed"><svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#social-link-twitter"></use></svg></a></li><li><a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.rednoseday.com%2Fnews-tv-and-events%2Fnews%2Fbest-auction-ever-raising-money-red-nose-day&amp;amp;title=Best+Auction+Ever+-+raising+money+for+Red+Nose+Day" title="Facebook" class="social-link facebook-social-link social-link-popup SocialPopup-processed"><svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#social-link-facebook"></use></svg></a></li></ul></div>  
		    </div>
		    <h1 class="cr-article__title">Best Auction Ever - raising money for Red Nose Day</h1>
		    <span class="cr-article__date"> 
		      <div class="field__label visually-hidden">Display date</div>
		      17 March 2017
		      </span>
		  </header>
		  <section class="cr-article__body">   
		 		<div class="cr-body">
		   		<p>Over 20 remarkable celebrity, film and television experiences and items are up for grabs in the <strong>#BestAuctionEver</strong> and prize draw give-away for Red Nose Day.</p>
		   		<ul>
		   		    <li><a class="link" href="#">Home </a></li>
		   		    <li><a class="link" href="#">Your impact</a></li>
		   		</ul>
					<ul><li>Would you like a chat with <strong>Ed Sheeran</strong> backstage at one of his shows? Get involved.</li>
						<li>Have you ever dreamt of flying to LA to hang out with <strong>James Corden</strong> at his chat show? He’s right there waiting for you.</li>
						<li>Doctor Who fans, have you ever wondered what it would be like to sit down for brunch with not one, not two, but seven,<strong> Doctors</strong>? Wonder no more.</li>
						<li>Feel like hanging out with the <strong>Formula 1 drivers</strong> at British Grand Prix week, while being given racing tips by <strong>Geri Horner</strong>? Now’s your chance.</li>
					</ul><p>And not only that…</p>

					<ul><li><strong>Claudia Winkleman</strong> is asking you to join her for a fringe trim and spray tan.</li>
						<li>Five <strong>Masterchef </strong>winners want to come to your house to cook you dinner.</li>
						<li><strong>Miranda Hart</strong> is hoping to take you for a gallop down The Strand.</li>
						<li><strong>Little Mix</strong> are ready and waiting to skype you.</li>
						<li><strong>Jamie Oliver</strong> and <strong>Michel Roux</strong> are longing to teach you to cook.</li>
						<li><strong>Gareth Malone</strong> is up for a singing lesson.</li>
						<li><strong>James Rhodes</strong> would like to play the piano in your house for 20 of your friends.</li>
						<li><strong>Richard Curtis</strong> is waiting to give you a part in his next movie.</li>
						<li><strong>Gillian Anderson</strong> wants to join you for a wander around the Tate Modern.</li>
						<li><strong>Davina</strong> is looking for a private work out pal.</li>
						<li><strong>Tom Fletcher</strong> is all set to come to your house for a story and a sing-song.</li>
						<li>Baking legends, <strong>Mary Berry</strong> and <strong>Nadiya Hussein</strong> are in the kitchen wishing to make you a cake.</li>
						<li><strong>Tanya Burr</strong> is excited to take you on a shopping spree with £1,000 to spend on you.</li>
						<li><strong>Kirstie Allsopp</strong> is inviting you and your friends to her incredibly beautiful seaside house in Devon.</li>
						<li><strong>Sofie Gråbøl</strong> has had enough of the jumper she wore in The Killing and would like you to have it instead.</li>
					</ul><p>10 of these amazing experiences will also be up for grabs as part of a very special series of prize draws, so if bidding isn’t your thing, just £5 means you can enter online to be in with a chance of bagging yourself a once-in-a-lifetime experience.</p>

					<p class="font--large"><strong>Get bidding now and help raise some serious life-changing cash this Red Nose Day.</strong></p>

					<p class="font--large text-align-center"><a class="btn btn--black" href="https://www.givergy.com/charity/red-nose-day" target="_blank">See all items</a></p>
		    </div>
		  </section>
	  </div>
	</article>
</div>

Source: _sr18-styleguide.scss, line 474

News overview page

Overview for news landing page with filter

Example

Row's title visually hidden

Get ideas, tips and tools to help you fundraise

Row's title visually hidden

Red Nose Day is coming soon to BBC One

Get ideas, tips and tools to help you fundraise

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

Row's title can be hidden

Get ideas, tips and tools to help you fundraise

Relive all the best bits of last Red Nose Day

Jo's Top Tip

Top-up your fundraising total with a classic, pay-to-play, 'guess the weight of the cake' competition.

News article

News article with video

News article

News article with video

News article

News article with video

News article

News article with video

News article

News article with video

News article

News article with video

News article

News article

News article

News article

News article

News article