<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.