Cards

Card Header
Card content. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Card Footer
Card Header

Card content.

Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Card Footer
Card Header
Card Footer

Sass Configuration:

Name Type Default Description
$card-radius Boolean True Set to true for a rounded card component
$card-border Boolean True Set to true for a bordered card
$card-background Color $ghost Set the background color of the card
$card-padding Number 1rem Defines the padding of the card elements
$card-header-bg Color $gainsboro Set the background color of the card header element
$card-footer-bg Color $gainsboro Set the background color of the card footer element

Example Code:

<!-- Card with Header, Content and Footer -->
<div class="small-4 columns">
    <div class="card">
        <header>Card Header</header>
        <div class="card-content">Card content</div>
        <footer>Card Footer</footer>
    </div>
</div>

<!-- Card with Image -->
<div class="small-4 columns">
    <div class="card">
        <header>Card Header</header>
        <img src="images/400x150.gif">
        <footer>Card Footer</footer>
    </div>
</div>