1.2.1 #Components.cards.cells Card Cells

Toggle example guides Toggle HTML markup

Cards can be divided into cells for more complex layouts.

Example

Card Cell 1

Card cell 2

Card Cell 3

Card cell 4

Markup 
<div class="card-cells">
  <div class="row">
    <div class="card col-xs-12 col-md-5">
      <p>Card Cell 1</p>
    </div>
    <div class="card col-xs-12 col-md-7">
      <p>Card cell 2</p>
    </div>
  </div>
  <div class="row">
    <div class="card col-xs-12 col-md-2">
       <p>Card Cell 3</p>
    </div>
    <div class="card col-xs-12 col-md-10">
      <p>Card cell 4</p>
    </div>
  </div>
</div>
Source: components/_card.scss, line 34