Content Wall

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