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.

Intro

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
<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 and .shadow-1 utility,
Which will give you shadow effect with hover

Card Title

.shadow

Card Title

.shadow-1
<!-- SHADOW -->
<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>


<!-- SHADOW-1 -->
<div class="card shadow-1">
    <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. Dignissimos, esse deserunt doloremque odit voluptatibus quos?

Click Me

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/100px150?theme=thumb&bg=7971aa&fg=eceeef&text=Thumbnail"
                alt="Card image cap">
            <div class="card-body">
                <p class="text-muted"><small>Lorem ipsum dolor sit amet.</small></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/100px150?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"><small>Lorem ipsum dolor sit amet.</small></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/100px150?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>

Feel free to Report any typo, any bug or request new Feature, you are always Welcome!!

Support Butter Cake 😃

Monthly donation

Patreon

One Time donation

Page Content