Example

Technology partners

Markup: components/partners-grid/partners-grid.twig
<div class="view view-partners view-id-partners view-display-id-block_1 js-view-dom-id-7758a0e48e90dbaf2402acc9049443bff5572cab14c43ed56a1d0ea495cf197c clearfix partners-grid">
    <div class="view-content clearfix">
        <div class="item-list">
            <h2>Technology partners</h2>
            <ul>
                <li>
                    <article role="article" about="/partners/paypal" class="node node--type-partner node--view-mode-teaser">
                        <span class="visually-hidden"><span class="field field--name-title field--type-string field--label-hidden">PayPal</span>
                        </span>
                        <div class="node__content">
                            <div class="partner__link">
                                <a href="#" title="find out more">
                                    <img alt="PayPal" src="kss-assets/images/paypal-logo.png" width="670" height="377" typeof="foaf:Image">
                                    <span>Find out more</span>
                                </a>
                            </div>
                        </div>
                    </article>
                </li>
                <li>
                    <article role="article" about="/partners/amazon-web-services" class="node node--type-partner node--view-mode-teaser">
                        <span class="visually-hidden"><span class="field field--name-title field--type-string field--label-hidden">Amazon Web Services</span>
                        </span>
                        <div class="node__content">
                            <div class="partner__link">
                                <a href="#" title="find out more">
                                    <img alt="PayPal" src="kss-assets/images/paypal-logo.png" width="670" height="377" typeof="foaf:Image">
                                    <span>Find out more</span>
                                </a>
                            </div>
                        </div>
                    </article>
                </li>
                <li>
                    <article role="article" about="/partners/trillium" class="node node--type-partner node--view-mode-teaser">
                        <span class="visually-hidden"><span class="field field--name-title field--type-string field--label-hidden">Trillium</span>
                        </span>
                        <div class="node__content">
                            <div class="partner__link">
                                <a href="#">
                                    <img alt="PayPal" src="kss-assets/images/paypal-logo.png" width="670" height="377" typeof="foaf:Image">
                                    <span>Find out more</span>
                                </a>
                            </div>
                        </div>
                    </article>
                </li>
                <li>
                    <article role="article" about="/partners/armakuni" class="node node--type-partner node--view-mode-teaser">
                        <span class="visually-hidden"><span class="field field--name-title field--type-string field--label-hidden">Armakuni</span>
                        </span>
                        <div class="node__content">
                            <div class="partner__link">
                                <a href="#">
                                    <img alt="PayPal" src="kss-assets/images/paypal-logo.png" width="670" height="377" typeof="foaf:Image">
                                    <span>Find out more</span>
                                </a>
                            </div>
                        </div>
                    </article>
                </li>
                <li>
                    <article role="article" about="/partners/ncc-group" class="node node--type-partner node--view-mode-teaser">
                        <span class="visually-hidden"><span class="field field--name-title field--type-string field--label-hidden">NCC Group</span>
                        </span>
                        <div class="node__content">
                            <div class="partner__link">
                                <a href="#">
                                    <img alt="PayPal" src="kss-assets/images/paypal-logo.png" width="670" height="377" typeof="foaf:Image">
                                    <span>Find out more</span>
                                </a>
                            </div>
                        </div>
                    </article>
                </li>
                <li>
                    <article role="article" about="/partners/cisco" class="node node--type-partner node--view-mode-teaser">
                        <span class="visually-hidden"><span class="field field--name-title field--type-string field--label-hidden">Cisco</span>
                        </span>
                        <div class="node__content">
                            <div class="partner__link">
                                <a href="#">
                                    <img alt="PayPal" src="kss-assets/images/paypal-logo.png" width="670" height="377" typeof="foaf:Image">
                                    <span>Find out more</span>
                                </a>
                            </div>
                        </div>
                    </article>
                </li>
                <li>
                    <article role="article" about="/partners/bt-mydonate" class="node node--type-partner node--view-mode-teaser">
                        <span class="visually-hidden"><span class="field field--name-title field--type-string field--label-hidden">BT MyDonate</span>
                        </span>
                        <div class="node__content">
                            <div class="partner__link">
                                <a href="#">
                                    <img alt="PayPal" src="kss-assets/images/paypal-logo.png" width="670" height="377" typeof="foaf:Image">
                                    <span>Find out more</span>
                                </a>
                            </div>
                        </div>
                    </article>
                </li>
                <li>
                    <article role="article" about="/partners/worldpay" class="node node--type-partner node--view-mode-teaser">
                        <span class="visually-hidden"><span class="field field--name-title field--type-string field--label-hidden">Worldpay</span>
                        </span>
                        <div class="node__content">
                            <div class="partner__link">
                                <a href="#">
                                    <img alt="PayPal" src="kss-assets/images/paypal-logo.png" width="670" height="377" typeof="foaf:Image">
                                    <span>Find out more</span>
                                </a>
                            </div>
                        </div>
                    </article>
                </li>
            </ul>
        </div>
    </div>
</div>
Source: _sr18-styleguide.scss, line 196