Cards
Basic Card
Markup
<div class="card">
<div class="card-content">
<h3>Card content</h3>
<p>Lorem ipsum</p>
</div>
</div>Result
Card content
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium atque autem deserunt dolores eveniet facere id magnam magni, nihil non nulla odio odit quaerat quis ratione similique sint sunt veniam?
Card with image
Markup
<div class="card">
<div class="card-image card-image-with-hover">
<img src="img/img.jpg" alt="">
</div>
<div class="card-content">
<h3>Card content</h3>
<p>Lorem ipsum</p>
</div>
</div>Result
Card content
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium atque autem deserunt dolores eveniet facere id magnam magni, nihil non nulla odio odit quaerat quis ratione similique sint sunt veniam?
Card with footer
Markup
<div class="card">
<div class="card-content">
<h3>Card content</h3>
<p>Lorem ipsum</p>
</div>
<div class="card-footer">
<ul class="inline-list center-align">
<li><a class="social-icon" href="#">
<i class="fa fa-globe"></i>
</a></li>
</ul>
</div>
</div>Result
Card content
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium atque autem deserunt dolores eveniet facere id magnam magni, nihil non nulla odio odit quaerat quis ratione similique sint sunt veniam?
Another demo
Markup
<div class="card">
<div class="card-image">
<img src="img/img.jpg" alt="">
</div>
<div class="card-content">
<h3>Card content</h3>
<p>Lorem ipsum</p>
</div>
<div class="card-footer">
<ul class="inline-list center-align">
<li><a class="social-icon" href="#">
<i class="fa fa-globe"></i>
</a></li>
</ul>
</div>
</div>Result
Card content
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium atque autem deserunt dolores eveniet facere id magnam magni, nihil non nulla odio odit quaerat quis ratione similique sint sunt veniam?