Card
‹ BackA basic card
component:
Awesome card
The awesome card is pretty awesome.
Posted Yesterday
<div class="card"> <div class="card--image"> <img src="http://placehold.it/300x200" /> </div> <div class="card--content compressed"> <p><strong>Awesome card</strong></p> <p>The awesome card is pretty awesome.</p> <p><small class="type--grey">Posted Yesterday</small></p> </div> </div>
Cards as links
Cards automatically inherit the nested-link
component when they are links, so you can use .nested-link--target
to highlight a fake link:
<a href="#" class="card"> <div class="card--image"> <img src="http://placehold.it/300x200" /> </div> <div class="card--content compressed"> <p><strong class="nested-link--target">Awesome card</strong></p> <p>The awesome card is pretty awesome.</p> <p><small class="type--grey">Posted Yesterday</small></p> </div> </a>
Cards with carousel
Cards can have carousels rather than a single image:
<div class="card"> <div class="card--image" data-carousel> <div data-carousel-slides> <img src="http://placehold.it/1024x600" /> <img src="http://placehold.it/1024x600" /> <img src="http://placehold.it/1024x600" /> <img src="http://placehold.it/1024x600" /> <img src="http://placehold.it/1024x600" /> </div> <div data-carousel-nav="counter"></div> </div> <a href="#" class="card--content compressed"> <p><strong class="nested-link--target">Awesome card</strong></p> <p>The awesome card is pretty awesome.</p> <p><small class="type--grey">Posted Yesterday</small></p> </a> </div>
Cover images
Normally card images are inline images, however you may want a responsive cover image that fills an aspect ratio block, you can move the image in to a background image and change the image class to card--image__cover
.
<a href="#" class="card"> <div class="card--image__cover" style="background-image: url(http://placehold.it/500x300);"></div> <div class="card--content compressed"> <p><strong class="nested-link--target">Awesome card</strong></p> <p>The awesome card is pretty awesome.</p> <p><small class="type--grey">Posted Yesterday</small></p> </div> </a>
Footer
You can add a footer to your card by using .card--footer
:
<a href="#" class="card"> <div class="card--image__cover" style="background-image: url(http://placehold.it/500x300);"></div> <div class="card--content compressed"> <p><strong class="nested-link--target">Awesome card</strong></p> <p>The awesome card is pretty awesome.</p> </div> <div class="card--footer compressed"> <p><small class="type--grey">Posted Yesterday</small></p> </div> </a>
Badges
Add card badges inside your image div:
<div class="spacing"> <a href="#" class="card"> <div class="card--image"> <div class="card--badge">Drama</div> <img src="http://placehold.it/300x200" /> </div> <div class="card--content compressed"> <p><strong class="nested-link--target">With Inline Image</strong></p> <p>The awesome card is pretty awesome.</p> <p><small class="type--grey">Posted Yesterday</small></p> </div> </a> <a href="#" class="card"> <div class="card--image__cover" style="background-image: url(http://placehold.it/500x300);"> <div class="card--badge">Comedy</div> </div> <div class="card--content compressed"> <p><strong class="nested-link--target">With Cover Image</strong></p> <p>The awesome card is pretty awesome.</p> <p><small class="type--grey">Posted Yesterday</small></p> </div> </a> </div>