3.2 organisms.card_wrapper Card Deck, vertical cards

Toggle example guides Toggle HTML markup

A set of equal width and height cards that aren’t attached to one another. 3 column sorted. Only applies to small devices and above.

Markup: components/organisms/card_wrapper/card_wrapper.twig
      <div class="bg-brand-lightest card-wrapper top ">
  <div class="container">
    <h2 class="card-title text-center">Card deck title</h2>
    <div class="card-deck">
     
    <div class="col">
        <a href="#" class="card card-button  text-center bg-white" title="title text">
    <h3 class="card-header">Card 1</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  text-center bg-white" title="title text">
    <h3 class="card-header">Card 2</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>
          </div>
  </div>
    </a>
      </div>
   
    <div class="col">
        <a href="#" class="card card-button  text-center bg-white" title="title text">
    <h3 class="card-header">Card 3</h3>    <div class="card-content">
    <div class="card-media"><img src="kss-assets/img/placeholder_3.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  text-center bg-white" title="title text">
    <h3 class="card-header">Card 4</h3>    <div class="card-content">
    <div class="card-media"></div>    <div class="card-block">
              <p class="card-text">A card with multiple paragraphs</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  text-center bg-white" title="title text">
    <h3 class="card-header">Card 5</h3>    <div class="card-content">
    <div class="card-media"></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  text-center bg-white" title="title text">
    <h3 class="card-header">Card 6</h3>    <div class="card-content">
    <div class="card-media"></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  text-center bg-white" title="title text">
  <div class="card-content">
    <div class="card-media"></div>    <div class="card-block">
              <p class="card-text">A card without a title</p>
          </div>
  </div>
    </a>
      </div>
   
    <div class="col">
        <a href="#" class="card card-button  text-center bg-white" title="title text">
  <div class="card-content">
    <div class="card-media"></div>    <div class="card-block">
              <p class="card-text">A card without a title</p>
          </div>
  </div>
    </a>
      </div>
   
    <div class="col">
        <a href="#" class="card card-button  text-center bg-white" title="title text">
  <div class="card-content">
    <div class="card-media"></div>    <div class="card-block">
              <p class="card-text">A card without a title</p>
          </div>
  </div>
    </a>
      </div>
      </div>
  </div>
</div>
Source: components/organisms/card_wrapper/_card_wrapper.scss, line 1