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
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos, esse deserunt doloremque odit voluptatibus quos?
Click MeSnippet 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!!