Content Block with Author Panel

Content block/widget with image, text, author name and picture
Below you can find an example of responsive content block with image, text and author information. This block can be a part of articles overview page, related content area 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.
All fields below are editable. You can experiment with the code and see the result instantly:
<div class="container">
<div class="ba-block">
<div class="image-container">
<img class="block-image" src="/images/blue-flower-400-175.png">
</div>
<div class="block-content">
<h2 class="block-header">How to take macro photos</h2>
<p>
Taking great macro photos may seem a lot trickier than it is. All the secret is in the lens.
</p>
</div>
<div class="block-footer">
<img src="/images/author.png" class="author-thumb">
<a href="#" class="author-line" rel="author">
<span class="author-name">John Smith</span><br>
<span class="author-occupation">Photographer</span>
</a>
<span class="time"><i class="icon-clock"></i> 1 hour ago</span>
</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;
}

/* Block with Author Styles */

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

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

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

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

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

.ba-block .block-footer {
margin: 0 20px 15px;
border-top: 1px solid #ddd;
padding-top: 12px;
}

.ba-block .author-thumb {
height: 30px;
width: 30px;
border-radius: 50%;
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}

.ba-block .author-line {
display: inline-block;
vertical-align: middle;
text-decoration: none;
color: #999;
font-size: 13px;
}

.ba-block .author-name {
color: #333;
text-transform: uppercase;
font-weight: bold;
display: inline-block;
}

.ba-block .time {
color: #999;
display: inline-block;
vertical-align: middle;
float: right;
margin-top: 9px;
font-size: 14px;
}

.ba-block .time i {
display: inline-block;
vertical-align: middle;
margin-top: 2px;
}

.ba-block .author-position {
font-family: Georgia, serif;
font-style: italic;
}
CSS
Browser support:
           
8+