Card

Card is by default 100% width and comes with all different colors! Some examples -

Card title

Commodi veniam non perferendis

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi veniam non perferendis dolorem quasi!

Button

27th Jan, 2018

Card primary

Commodi veniam non perferendis

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi veniam non perferendis dolorem quasi!

Button

27th Jan, 2018

Card dark

Commodi veniam non perferendis

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi veniam non perferendis dolorem quasi!

Button

27th Jan, 2018

<div class="card">
    <img class="card-img" src="https://picsum.photos/300/150?random" />
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle">Commodi veniam non perferendis</h6>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        <a href="#" class="button button-primary">Button</a>
        <p class="card-information">27th Jan, 2018</p>
    </div>
</div>

Other card classes are - card-primary card-secondary card-tertiary card-info card-success card-danger card-link card-dark card-black

With card header and footer

Card header

Card title

Commodi veniam non perferendis

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi veniam non perferendis dolorem quasi!

Button

27th Jan, 2018

Card footer

Card header

Card title

Commodi veniam non perferendis

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi veniam non perferendis dolorem quasi!

Button

27th Jan, 2018

Card footer

Card header

Card title

Commodi veniam non perferendis

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi veniam non perferendis dolorem quasi!

Button

27th Jan, 2018

Card footer

<div class="card">
    <div class="card-header">
        Card header
    </div>
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle">Commodi veniam non perferendis</h6>
        <img class="card-body-img rounded" src="https://picsum.photos/300/150?image=0" alt="">
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        <a href="#" class="button button-primary">Button</a>
        <p class="card-information">27th Jan, 2018</p>
    </div>
    <div class="card-footer">
        Card footer
    </div>
</div>

SASS

Reference from _card.scss

$card-radius: rem(2);
$card-shadow: 0 rem(2) rem(5) 0 rgba(0,0,0, 0.08);
$card-header-footer-border: rem(1) solid lighten(map-get($colors, dark), 83%);
$card-header-footer-color: lighten(map-get($colors, dark), 40%);