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 Famous UI components. They have no margin by default so use spacing
utilities as needed.
Regular Card
Card Title
card body
<div class="fui-card">
<div class="fui-card-header">
<h4 class="fui-card-title">Card Title</h4>
</div>
<div class="fui-card-body">
card body
</div>
<div class="fui-card-footer">
card footer
</div>
</div>Sample Cards
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos, esse deserunt doloremque odit voluptatibus quos?
Click Me
<div class="row">
<div class="col-sm-6 col-md-4 mb-2">
<div class="card ">
<img src="http://source.unsplash.com/400x250/" alt="">
<div class="fui-card-body">
<p class="text-muted"><small>Lorem ipsum dolor sit amet.</small></p>
<a class="fui-btn fui-btn-primary" href="#">Click Me</a>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 mb-2">
<div class="fui-card">
<img src="http://source.unsplash.com/400x250/" alt="">
<div class="fui-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="fui-btn fui-btn-primary" href="#">Click Me</a>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 mb-2">
<div class="fui-card">
<img src="http://source.unsplash.com/400x250/" alt="">
<div class="fui-card-body">
<div class="button-group">
<a class="fui-btn fui-btn-primary column" href="#">view</a>
<a class="fui-btn fui-btn-dark column" href="#">edit</a>
</div>
</div>
</div>
</div>
</div>