Partners Grid
This is the Partners Grid
Example
Technology partners
-
PayPal -
Amazon Web Services -
Trillium -
Armakuni -
NCC Group -
Cisco -
BT MyDonate -
Worldpay
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="http://www.paypal.com" 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:
_shop19-styleguide.scss
, line 187