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: _shop18-styleguide.scss, line 338