Responsive Features Blocks

Simple four features blocks with icons on coloured circles

If you have an online portfolio or company website, you sometimes need to display a short, eye-catching overview of your services or product features. One of the most popular ways to do this is by organizing your content into blocks combining it with an icon or image.

In this article, you can find an example of responsive content blocks with text and icons that can represent features, services and other related content on your website.

How it was made

Features blocks are created to be responsive; for this purpose Simple HTML5/CSS3 Grid System was used. You can also use any other grid system such as Twitter Bootstrap or Foundation. On a desktop or larger screen, blocks take 25% of site width; 50% of site width on tablets; and 100% of site width on mobile devices.

Icons were made with the help of an 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. Coloured circles were made with

elements, which have border-width: 50%.

Check the sandbox below for the real-life example.

All fields below are editable. You can experiment with the code and see the result instantly:
<div class="container">
<div class="row features-row">
<div class="feature-block col-phone-100 col-tablet-50 col-desktop-25">
<div class="feature-icon">
<i class="icon-vector"></i>
</div>

<h3><a href="#">We Design</a></h3>
<p>We create brand identities, websites, mobile and desktop apps and much much more.</p>
</div>

<div class="feature-block col-phone-100 col-tablet-50 col-desktop-25">
<div class="feature-icon">
<i class="icon-code-html-file-1"></i>
</div>

<h3><a href="#">We Code</a></h3>
<p>We can code any kind of website, mobile or desktop app for your business.</p>
</div>

<div class="feature-block col-phone-100 col-tablet-50 col-desktop-25">
<div class="feature-icon">
<i class="icon-database-5"></i>
</div>

<h3><a href="#">We Host</a></h3>
<p>Our managed hosting prices will surprise you in a good way. We can host any type of website with any traffic</p>
</div>

<div class="feature-block col-phone-100 col-tablet-50 col-desktop-25">
<div class="feature-icon">
<i class="icon-call-phone"></i>
</div>

<h3><a href="#">We Manage</a></h3>
<p>Just call or write us, we will develop a project of your dream!</p>
</div>
</div>
</div>
HTML
@charset "UTF-8";

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

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

}

[data-icon]:before {
font-family: "sample-font" !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: "sample-font" !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-code-html-file-1:before {
content: "\67";
}
.icon-database-5:before {
content: "\68";
}
.icon-vector:before {
content: "\69";
}
.icon-call-phone:before {
content: "\6a";
}

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

body {
font-family: Montserrat, sans-serif;
color: #666;
font-size: 14px;
line-height: 18px
}

.container {
padding: 30px;
}

/* Grid Start */
.row {
margin-right: -15px;
margin-left: -15px;
}

.row:before,
.row:after {
display: table;
content: " ";
clear:both
}

.col-phone-10 {width: 10%}
.col-phone-20 {width: 20%}
.col-phone-25 {width: 25%}
.col-phone-33 {width: 33.3333%}
.col-phone-50 {width: 50%}
.col-phone-67 {width: 66.6666%}
.col-phone-75 {width: 75%}
.col-phone-80 {width: 80%}
.col-phone-90 {width: 90%}
.col-phone-100 {width: 100%}

.col-phone-10,
.col-phone-20,
.col-phone-25,
.col-phone-33,
.col-phone-50,
.col-phone-67,
.col-phone-75,
.col-phone-80,
.col-phone-90,
.col-phone-100 {
box-sizing: border-box;
float: left;
padding-right: 15px;
padding-left: 15px;
}

@media (min-width: 768px) {
.col-tablet-10 {width: 10%}
.col-tablet-20 {width: 20%}
.col-tablet-25 {width: 25%}
.col-tablet-33 {width: 33.3333%}
.col-tablet-50 {width: 50%}
.col-tablet-67 {width: 66.6666%}
.col-tablet-75 {width: 75%}
.col-tablet-80 {width: 80%}
.col-tablet-90 {width: 90%}

.col-tablet-10,
.col-tablet-20,
.col-tablet-25,
.col-tablet-33,
.col-tablet-50,
.col-tablet-67,
.col-tablet-75,
.col-tablet-80,
.col-tablet-90 {
box-sizing: border-box;
float: left;
padding-right: 15px;
padding-left: 15px;
}
}

@media (min-width: 992px) {
.col-desktop-10 {width: 10%}
.col-desktop-20 {width: 20%}
.col-desktop-25 {width: 25%}
.col-desktop-33 {width: 33.3333%}
.col-desktop-50 {width: 50%}
.col-desktop-67 {width: 66.6666%}
.col-desktop-75 {width: 75%}
.col-desktop-80 {width: 80%}
.col-desktop-90 {width: 90%}

.col-desktop-10,
.col-desktop-20,
.col-desktop-25,
.col-desktop-33,
.col-desktop-50,
.col-desktop-67,
.col-desktop-75,
.col-desktop-80,
.col-desktop-90 {
box-sizing: border-box;
float: left;
padding-right: 15px;
padding-left: 15px;
}
}

@media (min-width: 1200px) {
.col-big-screen-10 {width: 10%}
.col-big-screen-20 {width: 20%}
.col-big-screen-25 {width: 25%}
.col-big-screen-33 {width: 33.3333%}
.col-big-screen-50 {width: 50%}
.col-big-screen-67 {width: 66.6666%}
.col-big-screen-75 {width: 75%}
.col-big-screen-80 {width: 80%}
.col-big-screen-90 {width: 90%}

.col-big-screen-10,
.col-big-screen-20,
.col-big-screen-25,
.col-big-screen-33,
.col-big-screen-50,
.col-big-screen-67,
.col-big-screen-75,
.col-big-screen-80,
.col-big-screen-90 {
box-sizing: border-box;
float: left;
padding-right: 15px;
padding-left: 15px;
}
}

/* Grid End */

/* Features */
.features-row {margin-top: 20px;}

.feature-block {
padding: 0 30px;
text-align: center;
}

.feature-icon {
border-radius: 50%;
display: inline-block;
height: 60px;
margin-bottom: 20px;
width: 60px;
}

.feature-block:nth-child(1) .feature-icon {background: #2ecc71;}

.feature-block:nth-child(2) .feature-icon {background: #9b59b6;}

.feature-block:nth-child(3) .feature-icon {background: #e74c3c;}

.feature-block:nth-child(4) .feature-icon {background: #f39c12;}

.feature-icon i {
color: #fff;
font-size: 24px;
line-height: 68px;
margin-left: 2px;
}

.feature-block h3 a {
color: #000;
font-size: 17px;
font-weight: 700;
font-weight: bold;
margin-top: 0;
text-decoration: none;
text-transform: uppercase;
}

.feature-block h3 {margin-bottom: 15px;}

.feature-block p {
color: #666;
height: 80px;
margin-bottom: 0;
}

@media(min-width: 768px) {
.feature-block p {
height: 60px;
}
}
CSS
Browser support:
           
8+