Card

Overview

Arranges content in a contained card layout.

<div class="c-card">
    <img class="c-card__image">
    <div class="c-card__head"></div>	
    <div class="c-card__body"></div>
    <div class="c-card__foot"></div>	
</div>

Demo on CodePen

Modifiers

Border

Name	Description
c-card--bordered	Applies a border around the card.
c-card--rounded	Applies a border radius.

<div class="c-card c-card--rounded c-card--bordered">
    <img class="c-card__image">
    <div class="c-card__head"></div>	
    <div class="c-card__body"></div>
    <div class="c-card__foot"></div>	
</div>

Demo on CodePen

Notes

You can add both elevation and animations by applying the press behavior.

<div class="c-card b-press">
    <div class="c-card__image"></div>
    <div class="c-card__head"></div>
    <div class="c-card__body"></div>
    <div class="c-card__foot"></div>
</div>

Demo on CodePen