Styleguide

Cards

Cards are sub-section containers that we use to provide options for the user.

Cards can contain all kinds of content: from smaller headlines, to copy, to fields and buttons. A form is basically just a big card with fields and buttons. A modal is basically a floating card. Usually, though, cards will come in multiples: those could come in grids or stacked rows.

Card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corrupti consectetur, vel atque in amet laudantium a consequuntur nostrum! Nam quidem, harum. Quasi commodi non modi eligendi consequatur natus illo.

Card Tight

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corrupti consectetur, vel atque in amet laudantium a consequuntur nostrum! Nam quidem, harum. Quasi commodi non modi eligendi consequatur natus illo.

Card Loose

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corrupti consectetur, vel atque in amet laudantium a consequuntur nostrum! Nam quidem, harum. Quasi commodi non modi eligendi consequatur natus illo.

.section.bg-gray
  .card
    %h3 Card
    %p.copy Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corrupti consectetur, vel atque in amet laudantium a consequuntur nostrum! Nam quidem, harum. Quasi commodi non modi eligendi consequatur natus illo.
  .card.card--tight
    %h3 Card Tight
    %p.copy Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corrupti consectetur, vel atque in amet laudantium a consequuntur nostrum! Nam quidem, harum. Quasi commodi non modi eligendi consequatur natus illo.
  .card.card--loose
    %h3 Card Loose
    %p.copy Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corrupti consectetur, vel atque in amet laudantium a consequuntur nostrum! Nam quidem, harum. Quasi commodi non modi eligendi consequatur natus illo.
<div class='section bg-gray'>
  <div class='card'>
    <h3>Card</h3>
    <p class='copy'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corrupti consectetur, vel atque in amet laudantium a consequuntur nostrum! Nam quidem, harum. Quasi commodi non modi eligendi consequatur natus illo.</p>
  </div>
  <div class='card card--tight'>
    <h3>Card Tight</h3>
    <p class='copy'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corrupti consectetur, vel atque in amet laudantium a consequuntur nostrum! Nam quidem, harum. Quasi commodi non modi eligendi consequatur natus illo.</p>
  </div>
  <div class='card card--loose'>
    <h3>Card Loose</h3>
    <p class='copy'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corrupti consectetur, vel atque in amet laudantium a consequuntur nostrum! Nam quidem, harum. Quasi commodi non modi eligendi consequatur natus illo.</p>
  </div>
</div>

Backup plan

If the .card component isn't working in your situation, the closest prior component was the .box.box--white , .container , and .layout setup described on the old Container component page.

Contact

Primary designer was Alex Couch; primary developer was Carlos Leon.