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.
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.
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.
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>
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.
Primary designer was Alex Couch; primary developer was Carlos Leon.