<div class="container">
<div class="story-list-item">
<div class="story-list-item__icon">
<a class="story-list-item__default-icon" href="#link232" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/24181/icon01.png);"></a>
</div>
<div class="story-list-item__title">
<div class="story-list-item__domain">smashingmagazine.com</div>
<h2>
<a href="#link232" target="_blank" class="story-list-item__story-link">How To Use Shadows And Blur Effects In Modern UI Design</a>
</h2>
</div>
</div>
<div class="story-list-item">
<div class="story-list-item__icon">
<a class="story-list-item__default-icon" href="#link234" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/24181/icon02.png);"></a>
</div>
<div class="story-list-item__title">
<div class="story-list-item__domain">smashingmagazine.com</div>
<h2>
<a href="#link234" target="_blank" class="story-list-item__story-link">Designing With Real Data In Sketch Using The Craft Plugin</a>
</h2>
</div>
</div>
<div class="story-list-item">
<div class="story-list-item__icon">
<a class="story-list-item__default-icon" href="#link244" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/24181/icon03.png);"></a>
</div>
<div class="story-list-item__title">
<div class="story-list-item__domain">smashingmagazine.com</div>
<h2>
<a href="#link244" target="_blank" class="story-list-item__story-link">Web Development Reading List #171: Leaks, SHA-1 Collision, And Brotli</a>
</h2>
</div>
</div>
</div>
@import 'bourbon';
body {
background: #efefef;
text-align: center;
}
.container {
display: inline-block;
padding: 40px;
margin: 20px;
background: #fff;
text-align: left;
border-radius: 2px;
box-shadow: 0 10px 30px rgba(0,0,0,.2);
}
.story-list-item {
@include align-items(center);
@include display(flex);
@include flex-direction(row);
@include justify-content(flex-start);
&:not(:last-child) {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px dashed #eee;
}
&:last-child {
margin-bottom: 0;
padding-bottom: 0;
border: none;
}
&__default-icon {
width: 46px;
height: 46px;
margin-right: 20px;
display: inline-block;
background-size: 46px 46px;
background-color: #000;
background-blend-mode: screen;
border-radius: 50%;
border: 2px solid #fff;
&:visited {
background-color: #ccc;
}
}
&__domain {
color: rgba(0, 0, 0, .25);
font-weight: bold;
}
&__title {
h2 {
margin: 10px 0 0 0;
line-height: 1.4em;
font-size: 22px;
}
a {
color: rgba(0, 0, 0, .9);
text-decoration: none;
&:hover,
&:focus,
&:active {
color: #2fbce5;
}
&:visited {
color: #9A9A9A;
&:hover {
color: #666;
}
}
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.