Content Block with Stacked Date

Responsive overview widget/block with stacked date and ribbon

Below you can find an example of responsive content block with image, text, stacked date origami ribbon. 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="sd-block">
<img class="block-image" src="/images/desk-setup-400-175.jpg">
<div class="ribbon">Hardware</div>
<div class="block-content">
<h2 class="block-header">Desk Setup for Everyone</h2>
<p>
<span class="date">
<span class="month">JAN</span>
<span class="day">17</span>
</span>
How to make great setup to work productively from home
</p>
</div>
</div>
</div>
HTML
@charset "UTF-8";

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

* {
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;
}

/* Stacked date Block Styles */

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

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

.sd-block .ribbon {
background: #27ae60;
color: #fff;
position: absolute;
top: 20px;
right: -7px;
padding: 4px 10px;
font-size: 14px;
height: 27px;
}

.sd-block .ribbon:after {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 7px 7px 0 0;
border-color: #166136 transparent transparent transparent;
position: absolute;
bottom: -7px;
right: 0px;
}

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

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

.sd-block .block-content .date {
float: right;
display: block;
text-align: center;
margin: 3px 0 0 10px;
border-left: 1px solid #ddd;
padding-left: 15px;
display: block;
}

.sd-block .block-content .month,
.sd-block .block-content .day {
display: block;
text-align: center;
}

.sd-block .block-content .month {
font-size:11px;
line-height: 15px;
}

.sd-block .block-content .day {
font-size: 20px;
color: #ff6509;
}
CSS
Browser support:
           
8+