Card
Create layout boxes with different styles.
Usage
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.
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
Style modifiers
Simply use Butter Cake's background utility classes.
Default
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum odit numquam laudantium cupiditate, ullam cumque.
Primary
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum odit numquam laudantium cupiditate, ullam cumque.
Secondary
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum odit numquam laudantium cupiditate, ullam cumque.
<div class="row">
<div class="col-md-4 col-sm-6 mb-2">
<div class="card">
<div class="card-header">
<h4 class="card-title">Default</h4>
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum odit numquam laudantium cupiditate, ullam cumque.
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 mb-2">
<div class="card bg-primary text-white">
<div class="card-header bg-primary">
<h4 class="card-title">Primary</h4>
</div>
<div class="card-body bg-primary">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum odit numquam laudantium cupiditate, ullam cumque.
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 mb-2">
<div class="card bg-secondary text-white">
<div class="card-header bg-secondary">
<h4 class="card-title">Secondary</h4>
</div>
<div class="card-body bg-secondary">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum odit numquam laudantium cupiditate, ullam cumque.
</div>
</div>
</div>
</div>
Contact us
Report Bug
Request Feature
Submit Work