3.2.1 organisms.card_wrapper.horizontal-left Card Deck, horizontal cards with image left

Toggle example guides Toggle HTML markup

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

header

With supporting text below as a natural lead-in to additional content.

With a link

With supporting text below as a natural lead-in to additional content.

With supporting text below as a natural lead-in to additional content.

With a link

header

With supporting text below as a natural lead-in to additional content.

With supporting text below as a natural lead-in to additional content.

With supporting text below as a natural lead-in to additional content.

With supporting text below as a natural lead-in to additional content.

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 text-left">Card deck title</h2>
    <div class="card-deck">
     
    <div class="col">
          <div class="card card-horizontal bg-brand text-left">
    <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-body ">
              <p class="card-text">With supporting text below as a natural lead-in to additional content.</p></p><a href='#'>With a link</a>
          </div>
  </div>
    </div>
      </div>
   
    <div class="col">
          <div class="card card-horizontal bg-brand-lightest text-left">
  <div class="card-content">
    <div class="card-media"><img src="kss-assets/img/placeholder_2.jpg"></div>    <div class="card-body ">
              <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><a href='#'>With a link</a>
          </div>
  </div>
    </div>
      </div>
   
    <div class="col">
          <div class="card card-horizontal bg-gray text-left">
    <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-body ">
              <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>
    </div>
      </div>
   
    <div class="col">
          <div class="card card-horizontal bg-gray-lightest text-left">
  <div class="card-content">
    <div class="card-media"><img src="kss-assets/img/placeholder_2.jpg"></div>    <div class="card-body ">
              <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>
    </div>
      </div>
      </div>
  </div>
</div>
Source: components/organisms/card_wrapper/_card_wrapper.scss, line 55