Recent Posts Widget

Simple widget with overview of recent posts

Below you can find an example of simple recent posts widget, that can be used on any blog or news website.

All fields below are editable. You can experiment with the code and see the result instantly:
<div class="card">
<div class="recent-posts">
<div class="header-container">
<h3 class="widget-header">Recent Posts</h3>
<a class="view-all" href="#">&rarr; View All</a>
</div>
<div class="recent-posts-item">
<a href="#">
<img src="/images/toy-car-100x100.png">
</a>
<h4 class="post-header"><a href="#">This app does everything you could possibly want</a></h4>
<p>Download it from the App Store for free.</p>
</div>
<div class="recent-posts-item">
<a href="#" target="_blank">
<img src="/images/mountains-landscape-100x100.png">
</a>
<h4 class="post-header"><a href="#">Who is this app aimed at?</a></h4>
<p>Everyone who could possibly need to do anything! It really is the full experience.</p>
</div>
<div class="recent-posts-item">
<a href="#">
<img src="/images/tonnel-100x100.png">
</a>
<h4 class="post-header"><a href="#">We are a small personal bank</a></h4>
<p>We believe will be right for you. We have 100 branches.</p>
</div>
<div class="recent-posts-item">
<a href="#">
<img src="/images/rabbit-100x100.png">
</a>
<h4 class="post-header"><a href="#">We offer a range of services</a></h4>
<p>We offer a range of services including Bank Accounts.</p>
</div>
</div>
</div>
HTML
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700|Quicksand:400,700');

body {
background: #eee;
padding: 0;
margin: 0;
font-family: 'Open Sans', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
}

.card {
background: #fff;
border-radius: 2px;
display: inline-block;
margin: 20px;
padding: 15px 20px;
max-width: 300px;
width:100%;
text-align: left;
box-shadow: 0 1px 3px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.25);
}

.header-container {
border-bottom: 1px solid #ddd;
padding: 8px 0 10px;
margin: 0 0 15px;
overflow:hidden;
}

.widget-header {
font-weight: bold;
text-transform: uppercase;
font-family:'Quicksand', sans-serif;
font-weight: 700;
float:left;
margin: 0;
}

.view-all {
float: right;
text-decoration: none;
color: #e67e22;
font-weight: bold;
font-size: 14px;
margin-top: 2px;
}

.recent-posts-item {
margin: 0 0 15px 0;
overflow: hidden;
padding: 0 0 15px 0;
border-bottom: 1px solid #ddd;
}

.recent-posts-item:last-child {
border-bottom: none;
padding-bottom: 0;
}

.recent-posts-item img {
padding: 0;
float: left;
height: 70px;
margin-right: 15px;
width: 70px;
}

.post-header,
.post-header a {
font-size: 15px;
margin: 0;
color: #222;
line-height: 18px;
text-transform: uppercase;
font-weight:700;
text-decoration: none;
font-family:'Quicksand', sans-serif;
}

.recent-posts-item p {
font-size: 14px;
color: #999;
padding-left:85px;
margin: 5px 0 0 0;
}
CSS
Browser support:
           
8+