Content Block with Icons Panel

Content block with image, text, date label and icons panel

Below you can find an example of responsive content block with image, text and panel with icons and counters. This block can be a part of block overview page, social newtwork, gallery or any other place where you need such content structure. It can be used together with any HTML/CSS Framework, like Twitter Bootstrap, Zurb Foundation, Skeleton and others.

For icon panel was used icon font, generated with Fontastic. For your website you can generate your own font or use ready icon fonts like Font Awesome, Entypo or others.

All fields below are editable. You can experiment with the code and see the result instantly:
<div class="container">
<div class="bi-block">
<div class="image-container">
<img class="block-image" src="/images/iphone-gold-400-175.jpg">
</div>
<div class="block-content">
<h2 class="block-header">Best Phone of 2017</h2>
<p>
Read this article to find out the best phone of the year.
</p>
</div>
<div class="block-footer">
<div class="stats">
<div class="stat-item"><i class="stat-icon icon-eye-view-1"></i> 30281</div>
<div class="stat-item"><i class="stat-icon icon-thumbs-up"></i> 2501</div>
<div class="stat-item"><i class="stat-icon icon-comment"></i> 112</div>
</div>
</div>
</div>
</div>
HTML
@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');

@font-face {
font-family: "content-blocks";
src: url("/fonts/content-blocks.eot");
src: url("/fonts/content-blocks.eot?#iefix") format("embedded-opentype"),
url("/fonts/content-blocks.woff") format("woff"),
url("/fonts/content-blocks.ttf") format("truetype"),
url("/fonts/content-blocks.svg#content-blocks") format("svg");
font-weight: normal;
font-style: normal;
}

[data-icon]:before {
font-family: "content-blocks" !important;
content: attr(data-icon);
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: "content-blocks" !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-comment:before {
content: "\62";
}

.icon-thumbs-up:before {
content: "\63";
}

.icon-eye-view-1:before {
content: "\61";
}

.icon-clock:before {
content: "\64";
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Layout */

body {
font-family: 'Montserrat', sans-serif;
background: #fff;
}

.container {
padding: 0 20px;
max-width: 400px;
margin: 30px auto 0;
}

/* Bottom Icons Block Styles */

.bi-block {
border: 1px solid #ddd;
background: #fff;
margin-bottom: 30px;
}

.bi-block .block-content {
padding: 15px 20px 25px;
font-size: 15px;
color: #999;
line-height: 23px;
}

.bi-block .image-container {
position: relative;
}

.bi-block .block-image {
width: 100%;
}

.bi-block .block-header {
font-size: 16px;
font-weight: 700;
margin-bottom: 15px;
color: #333;
text-transform: uppercase;
}

.bi-block .block-footer {
margin: -10px 20px 20px;
border-top: 1px solid #ddd;
padding-top: 15px;
}

.bi-block .stats {
color: #999;
}

.bi-block .stats:after {
content: '';
display: table;
clear: both;
}

.bi-block .stat-item {
float: left;
width: 33.3333%;
text-align: center;
}

.bi-block .stat-icon {
margin-right: 5px;
font-size: 18px;
display: inline-block;
vertical-align: top;
}
CSS
Browser support:
           
8+