Recipe List Item Design

index.html

<div class="wrapper">
  
   <ul class="block-list">
     <li class="block-list__item recipe--small">
       <div class="recipe__like--small"><i class="fa fa-heart-o"></i> <div class="recipe__likes-num--small">25</div></div>
       <div class="recipe__opts--small"><i class="fa fa-ellipsis-v"></i></div>
       <a href="#" class="recipe__img--small">
         <img src="https://farm3.staticflickr.com/2130/2211123068_136d7256bd.jpg" />
       </a>
       <div class="recipe__title--small">
         <h3>Hähnchebrust an Gemüsenudeln</h3>
         <ul class="ingredients-list--small">
           <li class="ingredients-list__header">Ingredients:</li>
           <li class="ingredient--small"><a href="#">Penne</a></li>
           <li class="ingredient--small"><a href="#">Hühnchenfilet</a></li>
           <li class="ingredient--small"><a href="#">Paprikasalz</a></li>
         </ul>
       </div>
       <div class="recipe__info--small">
         <time class="recipe__info__time"><i class="fa fa-clock-o"></i> 45min</time>
         <div class="recipe__info__serves"><i class="fa fa-users"></i> 4</div>
         <div class="recipe__info__comments"><i class="fa fa-comment-o"></i> 9</div>
       </div>
     </li>
     <li class="block-list__item recipe--small">
       <div class="recipe__like--small"><i class="fa fa-heart-o"></i> 12</div>
       <div class="recipe__opts--small"><i class="fa fa-ellipsis-v"></i></div>
       <a href="#" class="recipe__img--small"><img src="https://farm8.staticflickr.com/7194/6942983801_c1012f5098_c.jpg" /></a>
       <div class="recipe__title--small">
         <h3>Paprikae-Käse-Toasties</h3>
         <ul class="ingredients-list--small">
           <li class="ingredients-list__header">Ingredients:</li>
           <li class="ingredient--small"><a href="#">Toast</a></li>
           <li class="ingredient--small"><a href="#">Maasdammer</a></li>
           <li class="ingredient--small"><a href="#">Paprikasalz</a></li>
         </ul>
       </div>
       <div class="recipe__info--small">
         <time class="recipe__info__time"><i class="fa fa-clock-o"></i> 15min</time>
         <div class="recipe__info__serves"><i class="fa fa-users"></i> 2</div>
         <div class="recipe__info__comments"><i class="fa fa-comment-o"></i> 1</div>
       </div>
     </li>
     <li class="block-list__item recipe--small">
       <div class="recipe__like--small"><i class="fa fa-heart-o"></i> 135</div>
       <div class="recipe__opts--small"><i class="fa fa-ellipsis-v"></i></div>
       <a href="#" class="recipe__img--small"><img src="https://farm6.staticflickr.com/5300/5571495408_1a4eff058f_b.jpg" /></a>
       <div class="recipe__title--small">
         <h3>Spaghetti mit Tomatencremesauce</h3>
         <ul class="ingredients-list--small">
           <li class="ingredients-list__header">Ingredients:</li>
           <li class="ingredient--small"><a href="#">Spaghetti (duh)</a></li>
           <li class="ingredient--small"><a href="#">Dosentomaten</a></li>
           <li class="ingredient--small"><a href="#">Mozzarella</a></li>
         </ul>
       </div>
       <div class="recipe__info--small">
         <time class="recipe__info__time"><i class="fa fa-clock-o"></i> 30min</time>
         <div class="recipe__info__serves"><i class="fa fa-users"></i> 4</div>
         <div class="recipe__info__comments"><i class="fa fa-comment-o"></i> 60</div>
       </div>
     </li>
   </ul>
  
</div>

Recipe List Item Design.markdown

Recipe List Item Design

Forked from RobinThrift's Pen Recipe List Item Design.

A Pen by Mohammad Sami AlMouhtaseb on CodePen.

License.

script.js

var $items = $('.block-list__item'),
    maxH = 0;

$items.each(function() {
  var h = $(this).height();
  maxH = (h > maxH) ? h : maxH;
});

$items.height(maxH);

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

body {
  background: #fff;
  font-family: 'Droid Sans', 'Helvetica Neue', Helvetica, sans-serif;
}

.wrapper {
  width: 1000px;
  margin: 10px auto;
}

/* BLOCK LIST */
.block-list {
  
}

.block-list__item {
  float: left;
  width: 31%;
  margin: 10px 1%;
  box-sizing: border-box;
  list-style: none;
}

/* RECIPE */
.recipe--small {
  position: relative;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0px 0px 3px rgba(0,0,0,.3);
  padding-bottom: 35px;
}

.recipe__like--small {
  position: absolute;
  background: #dc3131;
  color: #fbfbfb;
  width: 30px;
  padding: 3px;
  padding-bottom: 0;
  line-height: 20px;
  left: 10px;
  top: 10px;
  text-align: center;
  font-size: 14px;
  border-radius: 4px;
  z-index: 15;
  cursor: pointer;
  
  i {
    font-size: 17px;
  }
}
.recipe__likes-num--small {
  background: darken(#dc3131 ,5);
  display: block;
  width: 100%;
  padding: 3px;
  position: relative;
  left: -3px;
  border-radius: 0 0 4px 4px;
}


.recipe__opts--small {
  position: absolute;
  color: #fbfbfb;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
  z-index: 15;
  font-size: 20px;
  right: 0;
  top: 1px;
  opacity: 0.7;
  cursor: pointer;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  
  &:hover {
    opacity: 1;
  }
}


.recipe__img--small {
  border-radius: 4px 4px 0 0;
  overflow: hidden;
  width: 98%;
  display: block;
  height: 150px;
  position: relative;
  left: 1%;
  top: 3px;
  
  img {
    min-height: 100%;
    height: auto;
    width: 100%;
  }
  
  &::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 4px 4px 0 0;
    box-shadow: 0 0 15px rgba(0,0,0,.2) inset;
    z-index: 5;
    top: 0;
    left: 0;
  }
}

.recipe__title--small {
  min-height: 70px;
  color: #333;
  box-sizing: border-box;
  padding: 5px;
  font-size: 13px;
  
  h3 {
    margin: 0;
    font-size: 20px;
    padding-top: 3px;
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    margin-bottom: 4px;
  }
}

.recipe__info--small {
  border-top: 1px solid #fbfbfb;
//  background: #f9f9f9;
  background: #dc3131;
  border-radius: 0 0 4px 4px;
  height: 35px;
  color: #fbfbfb;
  position: absolute;
  bottom: 0;
  width: 100%;
}

.recipe__info__time {
  width: 32%;
  box-sizing: border-box;
  display: inline-block;
  height: 35px;
  line-height: 35px;
  text-align: center;
  margin: 0;
  border-right: 1px solid #fbfbfb;
  
  i {
//    color: #a90329;
  }
}

.recipe__info__serves {
  @extend .recipe__info__time;
}

.recipe__info__comments {
  @extend .recipe__info__time;
  border-right: 0;
}

// INGREDIENTS
.ingredients-list__header {
  display: inline-block;
  color: #dc3131;
}

.ingredients-list--small {
  display: inline-block;
  padding: 0;
}

.ingredient--small {
  list-style: none;
  display: inline-block;
  
  a {
    color: #333;
    text-decoration: none;
    
    &:hover {
      text-decoration: underline;
    }
  }
  
  &::after {
    content: ', '
  }
  
  &:last-child::after {
    content: '';
  }
}