Pages

Source: _rnd17-styleguide.scss, line 312

Content Wall

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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

Row's title visually hidden

  • test
    test

    Jo's Top Tip

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

  • 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

Row's title can be hidden

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: _rnd17-styleguide.scss, line 316

News article

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

News article page

Example

Best Auction Ever - raising money for Red Nose Day

17 March 2017
Africa

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/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">
	    <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>
	      	<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>
	  </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--red" href="https://www.givergy.com/charity/red-nose-day" target="_blank">See all items</a></p>
	    </div>
	  </section>
  </div>
</article>
Source: _rnd17-styleguide.scss, line 325

Press release article page

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Example

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: _rnd17-styleguide.scss, line 333

News overview page

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Overview for news landing page with filter

Example
Markup: components/news-overview/news.twig 
<section class="news-landing__wrapper">
  <div class="news-landing__content-wrapper">
    <div>
      <div class="contextual-region view view-what-s-going-on view-id-what_s_going_on view-display-id-block_1 js-view-dom-id-6b20195c6178d9d04bccf4bba56ffa7ef7be375d3e64bb783ee2e74ce60ca95c">
        <div class="news-landing__filter">
          <form class="views-exposed-form bef-exposed-form" data-bef-auto-submit-full-form="" data-drupal-selector="views-exposed-form-what-s-going-on-block-1" action="/web/whats-going-on" method="get" id="views-exposed-form-what-s-going-on-block-1" accept-charset="UTF-8" data-drupal-form-fields="edit-field-article-category-target-id">
            <div class="js-form-item form-item js-form-type-select form-type-select js-form-item-field-article-category-target-id form-item-field-article-category-target-id">
              <label for="edit-field-article-category-target-id-button">Filter by category:</label>
              <select data-drupal-selector="edit-field-article-category-target-id" id="edit-field-article-category-target-id" name="field_article_category_target_id" class="form-select" style="display: none;">
                <option value="All" selected="selected">All</option>
                <option value="16">Challenges</option>
                <option value="17">Fundraising</option>
                <option value="19">Red Nose Day Partners</option>
                <option value="14">The difference you make</option>
              </select>
              <span class="ui-selectmenu-button ui-widget ui-state-default ui-corner-all" tabindex="0" id="edit-field-article-category-target-id-button" role="combobox" aria-expanded="false" aria-autocomplete="list" aria-owns="edit-field-article-category-target-id-menu" aria-haspopup="true" aria-activedescendant="ui-id-1" aria-labelledby="ui-id-1" aria-disabled="false" style="width: 160px;"><span class="ui-icon ui-icon-triangle-1-s"></span><span class="ui-selectmenu-text">All</span></span>
            </div>
            <div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form-wrapper" id="edit-actions"><input data-bef-auto-submit-click="" class="js-hide button js-form-submit form-submit" data-drupal-selector="edit-submit-what-s-going-on" type="submit" id="edit-submit-what-s-going-on" value="Apply"></div>
          </form>
        </div>
        <div class="news-landing__content">
          <div class="news-landing__item">
            <article class="article-teaser">
              <a class="article-teaser__link" href="#">
                <div class="article-teaser__image">
                  <picture>
                    <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.jpg" alt="" typeof="foaf:Image">
                  </picture>
                </div>
                <div class="article-teaser__content-wrapper">
                  <div class="article-teaser__content">
                    <span class="article-teaser__date"> 
                    28 October 2016
                    </span>
                    <h2>News article</h2>
                  </div>
                </div>
              </a>
            </article>
          </div>
          <div class="news-landing__item">
            <article class="article-teaser">
              <a class="article-teaser__link" href="#">
                <div class="article-teaser__video">
                  <picture>
                    <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.jpg" alt="" typeof="foaf:Image">
                  </picture>
                </div>
                <div class="article-teaser__content-wrapper">
                  <div class="article-teaser__content">
                    <span class="article-teaser__date"> 
                    28 October 2016
                    </span>
                    <h2>News article with video</h2>
                  </div>
                </div>
              </a>
            </article>
          </div>
          <div class="news-landing__item">
            <article class="article-teaser">
              <a class="article-teaser__link" href="#">
                <div class="article-teaser__image">
                  <picture>
                    <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.jpg" alt="" typeof="foaf:Image">
                  </picture>
                </div>
                <div class="article-teaser__content-wrapper">
                  <div class="article-teaser__content">
                    <span class="article-teaser__date"> 
                    28 October 2016
                    </span>
                    <h2>News article</h2>
                  </div>
                </div>
              </a>
            </article>
          </div>
          <div class="news-landing__item">
            <article class="article-teaser">
              <a class="article-teaser__link" href="#">
                <div class="article-teaser__video">
                  <picture>
                    <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.jpg" alt="" typeof="foaf:Image">
                  </picture>
                </div>
                <div class="article-teaser__content-wrapper">
                  <div class="article-teaser__content">
                    <span class="article-teaser__date"> 
                    28 October 2016
                    </span>
                    <h2>News article with video</h2>
                  </div>
                </div>
              </a>
            </article>
          </div>
          <div class="news-landing__item">
            <article class="article-teaser">
              <a class="article-teaser__link" href="#">
                <div class="article-teaser__image">
                  <picture>
                    <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.jpg" alt="" typeof="foaf:Image">
                  </picture>
                </div>
                <div class="article-teaser__content-wrapper">
                  <div class="article-teaser__content">
                    <span class="article-teaser__date"> 
                    28 October 2016
                    </span>
                    <h2>News article</h2>
                  </div>
                </div>
              </a>
            </article>
          </div>
          <div class="news-landing__item">
            <article class="article-teaser">
              <a class="article-teaser__link" href="#">
                <div class="article-teaser__video">
                  <picture>
                    <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.jpg" alt="" typeof="foaf:Image">
                  </picture>
                </div>
                <div class="article-teaser__content-wrapper">
                  <div class="article-teaser__content">
                    <span class="article-teaser__date"> 
                    28 October 2016
                    </span>
                    <h2>News article with video</h2>
                  </div>
                </div>
              </a>
            </article>
          </div>
          <div class="news-landing__item">
            <article class="article-teaser">
              <a class="article-teaser__link" href="#">
                <div class="article-teaser__image">
                  <picture>
                    <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.jpg" alt="" typeof="foaf:Image">
                  </picture>
                </div>
                <div class="article-teaser__content-wrapper">
                  <div class="article-teaser__content">
                    <span class="article-teaser__date"> 
                    28 October 2016
                    </span>
                    <h2>News article</h2>
                  </div>
                </div>
              </a>
            </article>
          </div>
          <div class="news-landing__item">
            <article class="article-teaser">
              <a class="article-teaser__link" href="#">
                <div class="article-teaser__video">
                  <picture>
                    <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.jpg" alt="" typeof="foaf:Image">
                  </picture>
                </div>
                <div class="article-teaser__content-wrapper">
                  <div class="article-teaser__content">
                    <span class="article-teaser__date"> 
                    28 October 2016
                    </span>
                    <h2>News article with video</h2>
                  </div>
                </div>
              </a>
            </article>
          </div>
          <div class="news-landing__item">
            <article class="article-teaser">
              <a class="article-teaser__link" href="#">
                <div class="article-teaser__image">
                  <picture>
                    <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.jpg" alt="" typeof="foaf:Image">
                  </picture>
                </div>
                <div class="article-teaser__content-wrapper">
                  <div class="article-teaser__content">
                    <span class="article-teaser__date"> 
                    28 October 2016
                    </span>
                    <h2>News article</h2>
                  </div>
                </div>
              </a>
            </article>
          </div>
          <div class="news-landing__item">
            <article class="article-teaser">
              <a class="article-teaser__link" href="#">
                <div class="article-teaser__video">
                  <picture>
                    <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.jpg" alt="" typeof="foaf:Image">
                  </picture>
                </div>
                <div class="article-teaser__content-wrapper">
                  <div class="article-teaser__content">
                    <span class="article-teaser__date"> 
                    28 October 2016
                    </span>
                    <h2>News article with video</h2>
                  </div>
                </div>
              </a>
            </article>
          </div>
          <div class="news-landing__item">
            <article class="article-teaser">
              <a class="article-teaser__link" href="#">
                <div class="article-teaser__image">
                  <picture>
                    <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.jpg" alt="" typeof="foaf:Image">
                  </picture>
                </div>
                <div class="article-teaser__content-wrapper">
                  <div class="article-teaser__content">
                    <span class="article-teaser__date"> 
                    28 October 2016
                    </span>
                    <h2>News article</h2>
                  </div>
                </div>
              </a>
            </article>
          </div>
          <div class="news-landing__item">
            <article class="article-teaser">
              <a class="article-teaser__link" href="#">
                <div class="article-teaser__video">
                  <picture>
                    <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.jpg" alt="" typeof="foaf:Image">
                  </picture>
                </div>
                <div class="article-teaser__content-wrapper">
                  <div class="article-teaser__content">
                    <span class="article-teaser__date"> 
                    28 October 2016
                    </span>
                    <h2>News article with video</h2>
                  </div>
                </div>
              </a>
            </article>
          </div>
        </div>
        {# pagination #}
        {% include directory ~ '../pagination/pagination.twig' %}
      </div>
    </div>
  </div>
</section>
Source: _rnd17-styleguide.scss, line 339

Press releases overview page

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Example
Markup: components/news-overview/news_press-releases.twig 
<section class="news-landing__wrapper">
  <div class="news-landing__content-wrapper">
    <div>
      <div class="contextual-region view view-what-s-going-on view-id-what_s_going_on view-display-id-block_1 js-view-dom-id-6b20195c6178d9d04bccf4bba56ffa7ef7be375d3e64bb783ee2e74ce60ca95c">
        <div class="news-landing__filter">
          <form class="views-exposed-form bef-exposed-form" data-bef-auto-submit-full-form="" data-drupal-selector="views-exposed-form-what-s-going-on-block-1" action="/web/whats-going-on" method="get" id="views-exposed-form-what-s-going-on-block-1" accept-charset="UTF-8" data-drupal-form-fields="edit-field-article-category-target-id">
            <div class="js-form-item form-item js-form-type-select form-type-select js-form-item-field-article-category-target-id form-item-field-article-category-target-id">
              <label for="edit-field-article-category-target-id-button">Filter by category:</label>
              <select data-drupal-selector="edit-field-article-category-target-id" id="edit-field-article-category-target-id" name="field_article_category_target_id" class="form-select" style="display: none;">
                <option value="All" selected="selected">All</option>
                <option value="16">Rednoseday</option>
                <option value="17">Comicrelief</option>
                <option value="19">Red Nose Day Partners</option>
                <option value="14">The difference you make</option>
              </select>
              <span class="ui-selectmenu-button ui-widget ui-state-default ui-corner-all" tabindex="0" id="edit-field-article-category-target-id-button" role="combobox" aria-expanded="false" aria-autocomplete="list" aria-owns="edit-field-article-category-target-id-menu" aria-haspopup="true" aria-activedescendant="ui-id-1" aria-labelledby="ui-id-1" aria-disabled="false" style="width: 160px;"><span class="ui-icon ui-icon-triangle-1-s"></span><span class="ui-selectmenu-text">All</span></span>
            </div>
            <div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form-wrapper" id="edit-actions"><input data-bef-auto-submit-click="" class="js-hide button js-form-submit form-submit" data-drupal-selector="edit-submit-what-s-going-on" type="submit" id="edit-submit-what-s-going-on" value="Apply"></div>
          </form>
        </div>
        <div class="news-landing__content">
          <div class="news-landing__item news-landing__item--press-release">
            <article class="article-teaser article-teaser--rednoseday">
              <a class="article-teaser__link" href="#">
                <div class="article-teaser__image">
                  <picture>
                    <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.jpg" alt="" typeof="foaf:Image">
                  </picture>
                </div>
                <div class="article-teaser__content-wrapper">
                  <div class="article-teaser__content">
                    <span class="article-teaser__date"> 
                    28 October 2016
                    </span>
                    <h2>News article</h2>
                  </div>
                  <div></div>
                </div>
              </a>
            </article>
          </div>
          <div class="news-landing__item news-landing__item--press-release">
            <article class="article-teaser article-teaser--comicrelief">
              <a class="article-teaser__link" href="#">
                <div class="article-teaser__image">
                  <picture>
                    <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.jpg" alt="" typeof="foaf:Image">
                  </picture>
                </div>
                <div class="article-teaser__content-wrapper">
                  <div class="article-teaser__content">
                    <span class="article-teaser__date"> 
                    28 October 2016
                    </span>
                    <h2>News article</h2>
                  </div>
                  <div></div>
                </div>
              </a>
            </article>
          </div>
          <div class="news-landing__item news-landing__item--press-release">
            <article class="article-teaser article-teaser--comicrelief">
              <a class="article-teaser__link" href="#">
                <div class="article-teaser__image">
                  <picture>
                    <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.jpg" alt="" typeof="foaf:Image">
                  </picture>
                </div>
                <div class="article-teaser__content-wrapper">
                  <div class="article-teaser__content">
                    <span class="article-teaser__date"> 
                    28 October 2016
                    </span>
                    <h2>News article</h2>
                  </div>
                  <div></div>
                </div>
              </a>
            </article>
          </div>
          <div class="news-landing__item news-landing__item--press-release">
            <article class="article-teaser article-teaser--sportrelief">
              <a class="article-teaser__link" href="#">
                <div class="article-teaser__image">
                  <picture>
                    <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.jpg" alt="" typeof="foaf:Image">
                  </picture>
                </div>
                <div class="article-teaser__content-wrapper">
                  <div class="article-teaser__content">
                    <span class="article-teaser__date"> 
                    28 October 2016
                    </span>
                    <h2>News article</h2>
                  </div>
                  <div></div>
                </div>
              </a>
            </article>
          </div>
          <div class="news-landing__item news-landing__item--press-release">
            <article class="article-teaser article-teaser--rednoseday">
              <a class="article-teaser__link" href="#">
                <div class="article-teaser__image">
                  <picture>
                    <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.jpg" alt="" typeof="foaf:Image">
                  </picture>
                </div>
                <div class="article-teaser__content-wrapper">
                  <div class="article-teaser__content">
                    <span class="article-teaser__date"> 
                    28 October 2016
                    </span>
                    <h2>News article</h2>
                  </div>
                  <div></div>
                </div>
              </a>
            </article>
          </div>
          <div class="news-landing__item news-landing__item--press-release">
            <article class="article-teaser article-teaser--rednoseday">
              <a class="article-teaser__link" href="#">
                <div class="article-teaser__image">
                  <picture>
                    <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.jpg" alt="" typeof="foaf:Image">
                  </picture>
                </div>
                <div class="article-teaser__content-wrapper">
                  <div class="article-teaser__content">
                    <span class="article-teaser__date"> 
                    28 October 2016
                    </span>
                    <h2>News article</h2>
                  </div>
                  <div></div>
                </div>
              </a>
            </article>
          </div>
        </div>
        {# pagination #}
        {% include directory ~ '../pagination/pagination.twig' %}
      </div>
    </div>
  </div>
</section>
Source: _rnd17-styleguide.scss, line 347

Partner Page

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Individual Partner page

Example
Paypal logo

A massive thank you to PayPal for supporting Sport Relief. They allow our supporters to donate quickly, easily and – most importantly – securely through PayPal donations. This is only possible thanks to the superb support their team gives us. Thank you, PayPal – you’re true pals!

 

Visit paypal.com
Markup: components/partners/partners.twig 
<div class="page-node-type-partner">
<article class="cr-article">
  <div class="cr-article__inner-wrapper">
    <div class="cr-article__body">
      
        <div class="cr-body">
          <article class="embedded-entity align-center">
          <div class="media media-cr-image view-mode-large">
            <img src="kss-assets/images/paypal-logo.png" alt="Paypal logo" title="Paypal logo" typeof="foaf:Image">
            </div>
          </article>
          <p>A massive thank you to PayPal for supporting Sport Relief. They allow our supporters to donate quickly, 
            easily and – most importantly – securely through PayPal donations. This is only possible thanks to the superb 
            support their team gives us. Thank you, PayPal – you’re true pals!</p>
        <p>&nbsp;</p>
        </div>

    <a href="http://home.bt.com/" class="link link--red" target="_blank">
        Visit paypal.com
    </a>
    </div>
  </div>
</article>
</div>
Source: _rnd17-styleguide.scss, line 353

Search results page

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Example
We found 33 results!
Displaying 1 - 10
Markup: components/search-results/search-results.twig 
<div class="path-search" style="padding-bottom:1px;">
  {# search banner #}
  {% include directory ~ '../search/search.twig' %}
  {# search results #}
  <div class="views-element-container contextual-region">
    <div class="contextual-region view view-search view-id-search view-display-id-page_1 js-view-dom-id-2051ec469cdfea1417fab1e08bbff05d1a6dab8378b5ef114a995f3fa45251a4">
      <div class="view-header">
        <div class="search__total">We found 33 results!</div>
        <div class="search__start-end">Displaying 1 - 10</div>
      </div>
      <div class="view-content">
        <div class="item-list">
          <ul>
            <li>
              <div class="search-result search-result--article">
                <a class="search-result__link" href="#">
                  <div class="search-result__image">
                    <a href="#">
                      <img src="kss-assets/images/1-1-img.jpg" alt="search result image">
                    </a>
                  </div>
                  <div class="search-result__content-wrapper bg--white">
                    <div class="search-result__content">
                      <span class="search-result__tag">Video</span>
                      <span class="search-result__published-date">1st Feb 2016</span>
                      <h3><a href="#">Follow in Dermont's footsteps</a></h3>
                      <p>Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.</p>
                    </div>
                  </div>
                </a>
              </div>
            </li>
            <li>
              <div class="search-result search-result--article">
                <a class="search-result__link" href="#">
                  <div class="search-result__image">
                    <a href="#">
                      <img src="kss-assets/images/1-1-img.jpg" alt="search result image">
                    </a>
                  </div>
                  <div class="search-result__content-wrapper bg--white">
                    <div class="search-result__content">
                      <span class="search-result__tag">Video</span>
                      <span class="search-result__published-date">1st Feb 2016</span>
                      <h3><a href="#">Follow in Dermont's footsteps</a></h3>
                      <p>Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.</p>
                    </div>
                  </div>
                </a>
              </div>
            </li>
            <li>
              <div class="search-result search-result--article">
                <a class="search-result__link" href="#">
                  <div class="search-result__image">
                    <a href="#">
                      <img src="kss-assets/images/1-1-img.jpg" alt="search result image">
                    </a>
                  </div>
                  <div class="search-result__content-wrapper bg--white">
                    <div class="search-result__content">
                      <span class="search-result__tag">Video</span>
                      <span class="search-result__published-date">1st Feb 2016</span>
                      <h3><a href="#">Follow in Dermont's footsteps</a></h3>
                      <p>Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.</p>
                    </div>
                  </div>
                </a>
              </div>
            </li>
            <li>
              <div class="search-result search-result--article">
                <a class="search-result__link" href="#">
                  <div class="search-result__image">
                    <a href="#">
                      <img src="kss-assets/images/1-1-img.jpg" alt="search result image">
                    </a>
                  </div>
                  <div class="search-result__content-wrapper bg--white">
                    <div class="search-result__content">
                      <span class="search-result__tag">Video</span>
                      <span class="search-result__published-date">1st Feb 2016</span>
                      <h3><a href="#">Follow in Dermont's footsteps</a></h3>
                      <p>Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.</p>
                    </div>
                  </div>
                </a>
              </div>
            </li>
            <li>
              <div class="search-result search-result--article">
                <a class="search-result__link" href="#">
                  <div class="search-result__image">
                    <a href="#">
                      <img src="kss-assets/images/1-1-img.jpg" alt="search result image">
                    </a>
                  </div>
                  <div class="search-result__content-wrapper bg--white">
                    <div class="search-result__content">
                      <span class="search-result__tag">Video</span>
                      <span class="search-result__published-date">1st Feb 2016</span>
                      <h3><a href="#">Follow in Dermont's footsteps</a></h3>
                      <p>Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.</p>
                    </div>
                  </div>
                </a>
              </div>
            </li>
            <li>
              <div class="search-result search-result--article">
                <a class="search-result__link" href="#">
                  <div class="search-result__image">
                    <a href="#">
                      <img src="kss-assets/images/1-1-img.jpg" alt="search result image">
                    </a>
                  </div>
                  <div class="search-result__content-wrapper bg--white">
                    <div class="search-result__content">
                      <span class="search-result__tag">Video</span>
                      <span class="search-result__published-date">1st Feb 2016</span>
                      <h3><a href="#">Follow in Dermont's footsteps</a></h3>
                      <p>Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.</p>
                    </div>
                  </div>
                </a>
              </div>
            </li>
            <li>
              <div class="search-result search-result--article">
                <a class="search-result__link" href="#">
                  <div class="search-result__image">
                    <a href="#">
                      <img src="kss-assets/images/1-1-img.jpg" alt="search result image">
                    </a>
                  </div>
                  <div class="search-result__content-wrapper bg--white">
                    <div class="search-result__content">
                      <span class="search-result__tag">Video</span>
                      <span class="search-result__published-date">1st Feb 2016</span>
                      <h3><a href="#">Follow in Dermont's footsteps</a></h3>
                      <p>Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.</p>
                    </div>
                  </div>
                </a>
              </div>
            </li>
            <li>
              <div class="search-result search-result--article">
                <a class="search-result__link" href="#">
                  <div class="search-result__image">
                    <a href="#">
                      <img src="kss-assets/images/1-1-img.jpg" alt="search result image">
                    </a>
                  </div>
                  <div class="search-result__content-wrapper bg--white">
                    <div class="search-result__content">
                      <span class="search-result__tag">Video</span>
                      <span class="search-result__published-date">1st Feb 2016</span>
                      <h3><a href="#">Follow in Dermont's footsteps</a></h3>
                      <p>Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.</p>
                    </div>
                  </div>
                </a>
              </div>
            </li>
            <li>
              <div class="search-result search-result--article">
                <a class="search-result__link" href="#">
                  <div class="search-result__image">
                    <a href="#">
                      <img src="kss-assets/images/1-1-img.jpg" alt="search result image">
                    </a>
                  </div>
                  <div class="search-result__content-wrapper bg--white">
                    <div class="search-result__content">
                      <span class="search-result__tag">Video</span>
                      <span class="search-result__published-date">1st Feb 2016</span>
                      <h3><a href="#">Follow in Dermont's footsteps</a></h3>
                      <p>Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.</p>
                    </div>
                  </div>
                </a>
              </div>
            </li>
            <li>
              <div class="search-result search-result--article">
                <a class="search-result__link" href="#">
                  <div class="search-result__image">
                    <a href="#">
                      <img src="kss-assets/images/1-1-img.jpg" alt="search result image">
                    </a>
                  </div>
                  <div class="search-result__content-wrapper bg--white">
                    <div class="search-result__content">
                      <span class="search-result__tag">Video</span>
                      <span class="search-result__published-date">1st Feb 2016</span>
                      <h3><a href="#">Follow in Dermont's footsteps</a></h3>
                      <p>Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.</p>
                    </div>
                  </div>
                </a>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    {# pagination #}
    {% include directory ~ '../pagination/pagination.twig' %}
  </div>
</div>
Source: _rnd17-styleguide.scss, line 361