Cards

Card on a Gray Background

<div class="card" >
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="card-link">Card link</a><a href="#" class="card-link">Another link</a>
    </div>
</div>

Card on a White Background

<div class="card card-white-bg" >
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="card-link">Card link</a><a href="#" class="card-link">Another link</a>
    </div>
</div>

Style

Cards have rounded corners of 4px, and a drop shadow (#000000 at 16% opacity, 1px offset both x and y axis, blur of 2).

States

Cards have a hover state where the drop shadow changes to #000000 at 16% opacity, 3px offset x-axis, 5px offset y-axis, blur of 5).