3.2.1 organisms.card_wrapper.horizontal-left Card Deck, horizontal cards with image left
A set of equal width and height cards that aren’t attached to one another. 2 column sorted. Only applies to small devices and above.
Example
Card deck title
Markup: components/organisms/card_wrapper/card_wrapper_horizontal_left.twig
<div class="card-wrapper bg-brand-lightest left ">
<div class="container">
<h2 class="card-title ">Card deck title</h2>
<div class="card-deck">
<div class="col">
<a href="#" class="card card-button card-horizontal text-left bg-white" title="title text">
<h3 class="card-header">header</h3> <div class="card-content">
<div class="card-media"><img src="kss-assets/img/placeholder_1.jpg" ></div> <div class="card-block">
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</a>
</div>
<div class="col">
<a href="#" class="card card-button card-horizontal text-left bg-white" title="title text">
<div class="card-content">
<div class="card-media"><img src="kss-assets/img/placeholder_2.jpg" ></div> <div class="card-block">
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p><p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</a>
</div>
<div class="col">
<a href="#" class="card card-button card-horizontal text-left bg-white" title="title text">
<h3 class="card-header">header</h3> <div class="card-content">
<div class="card-media"><img src="kss-assets/img/placeholder_2.jpg" ></div> <div class="card-block">
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p><p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</a>
</div>
<div class="col">
<a href="#" class="card card-button card-horizontal text-left bg-white" title="title text">
<div class="card-content">
<div class="card-media"><img src="kss-assets/img/placeholder_2.jpg" ></div> <div class="card-block">
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p><p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
Source:
components/organisms/card_wrapper/_card_wrapper.scss
, line 32