cards

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

Example

Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Butter Cake components. They have no margin by default so use spacing utilities as needed.

Regular Card

Card Title

card body
card footer 
<div class="card">
    <div class="card-header">
        <h4 class="card-title">Card Title</h4>
    </div>

    <div class="card-body">
        card body
    </div>

    <div class="card-footer">
        card footer
    </div>
</div>

Shadow Effect

Butter Cake comes with .shadow utility,
Which will give you shadow effect with hover

Card Title

card body
card footer 
<div class="card shadow">
    <div class="card-header">
        <h4 class="card-title">Card Title</h4>
    </div>

    <div class="card-body">
        card body
    </div>

    <div class="card-footer">
        card footer
    </div>
</div>

Sample Cards

Card image cap

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos, esse deserunt doloremque odit voluptatibus quos?

Click Me
Card image cap
Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, magni!

Click Me
Card image cap
view edit

Snippet For Above Cards

Uses holder.js for placeholder images 

<div class="row">
    <div class="col-sm-6 col-md-4 mb-2">
        <div class="card shadow">
            <img class="img-cover" data-src="holder.js/100px180?theme=thumb&bg=7971aa&fg=eceeef&text=Thumbnail" alt="Card image cap">
            <div class="card-body">
                <p class="text-muted">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos,
                    esse deserunt doloremque odit voluptatibus quos?</p>
                <a class="btn-primary" href="#">Click Me</a>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-4 mb-2">
        <div class="card">
            <img class="img-cover" data-src="holder.js/100px180?theme=thumb&bg=7971aa&fg=eceeef&text=Thumbnail" alt="Card image cap">
            <div class="card-body">
                <a class="h4 mb-1 d-block" href="#">Title</a>
                <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, magni!</p>
                <a class="btn-primary" href="#">Click Me</a>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-4 mb-2">
        <div class="card">
            <img class="img-cover" data-src="holder.js/100px180?theme=thumb&bg=7971aa&fg=eceeef&text=Thumbnail" alt="Card image cap">
            <div class="card-body">
                <div class="button-group">
                    <a class="btn-primary column" href="#">view</a>
                    <a class="btn-dark column" href="#">edit</a>
                </div>
            </div>
        </div>
    </div>
</div>