Example
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: _cr17-styleguide.scss, line 378