<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-sm-4">
<div class="wrimagecard wrimagecard-topimage">
<a href="#">
<div class="wrimagecard-topimage_header" style="background-color:rgba(187, 120, 36, 0.1) ">
<center><i class="fa fa-area-chart" style="color:#BB7824"></i></center>
</div>
<div class="wrimagecard-topimage_title">
<h4>Charts
<div class="pull-right badge">18</div></h4>
</div>
</a>
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="wrimagecard wrimagecard-topimage">
<a href="#">
<div class="wrimagecard-topimage_header" style="background-color: rgba(22, 160, 133, 0.1)">
<center><i class = "fa fa-cubes" style="color:#16A085"></i></center>
</div>
<div class="wrimagecard-topimage_title">
<h4>Controls
<div class="pull-right badge" id="WrControls"></div></h4>
</div>
</a>
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="wrimagecard wrimagecard-topimage">
<a href="#">
<div class="wrimagecard-topimage_header" style="background-color: rgba(213, 15, 37, 0.1)">
<center><i class="fa fa-pencil-square-o" style="color:#d50f25"> </i></center>
</div>
<div class="wrimagecard-topimage_title" >
<h4>Forms
<div class="pull-right badge" id="WrForms"></div>
</h4>
</div>
</a>
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="wrimagecard wrimagecard-topimage">
<a href="#">
<div class="wrimagecard-topimage_header" style="background-color: rgba(51, 105, 232, 0.1)">
<center><i class="fa fa-table" style="color:#3369e8"> </i></center>
</div>
<div class="wrimagecard-topimage_title">
<h4>Grid System
<div class="pull-right badge" id="WrGridSystem"></div></h4>
</div>
</a>
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="wrimagecard wrimagecard-topimage">
<a href="#">
<div class="wrimagecard-topimage_header" style="background-color: rgba(250, 188, 9, 0.1)">
<center><i class="fa fa-info-circle" style="color:#fabc09"> </i></center>
</div>
<div class="wrimagecard-topimage_title">
<h4>Information
<div class="pull-right badge" id="WrInformation"></div></h4>
</div>
</a>
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="wrimagecard wrimagecard-topimage">
<a href="#">
<div class="wrimagecard-topimage_header" style="background-color: rgba(121, 90, 71, 0.1)">
<center><i class="fa fa-bars" style="color:#795a47"> </i></center>
</div>
<div class="wrimagecard-topimage_title">
<h4>Navigation
<div class="pull-right badge" id="WrNavigation"></div></h4>
</div>
</a>
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="wrimagecard wrimagecard-topimage">
<a href="#">
<div class="wrimagecard-topimage_header" style="background-color: rgba(130, 93, 9, 0.1)">
<center><i class="fa fa-magic" style="color:#825d09"></i></center>
</div>
<div class="wrimagecard-topimage_title">
<h4>Themes & Icons
<div class="pull-right badge" id="WrThemesIcons"></div></h4>
</div>
</a>
</div>
</div>
</div>
</div>
.wrimagecard{
margin-top: 0;
margin-bottom: 1.5rem;
text-align: left;
position: relative;
background: #fff;
box-shadow: 12px 15px 20px 0px rgba(46,61,73,0.15);
border-radius: 4px;
transition: all 0.3s ease;
}
.wrimagecard .fa{
position: relative;
font-size: 70px;
}
.wrimagecard-topimage_header{
padding: 20px;
}
a.wrimagecard:hover, .wrimagecard-topimage:hover {
box-shadow: 2px 4px 8px 0px rgba(46,61,73,0.2);
}
.wrimagecard-topimage a {
width: 100%;
height: 100%;
display: block;
}
.wrimagecard-topimage_title {
padding: 20px 24px;
height: 80px;
padding-bottom: 0.75rem;
position: relative;
}
.wrimagecard-topimage a {
border-bottom: none;
text-decoration: none;
color: #525c65;
transition: color 0.3s ease;
}
