Styleguide 0.1.0

34 - Recipe preview box

The RecipeBox element is a preview of recipe from oppskrift.no website.

nivå lett
aktiv 30min
totalt 40min
Hjemmelaget plommehonning
<div class="recipe-box row">
   <div class="columns small-12 medium-12 large-12">
       <a target="_top" href="https://www.oppskrift.no/oppskrift/plommehonning">
           <div class="recipe-thumbnail">
                   <img src="https://www.oppskrift.no/bilder/c/l/1/b505dce9-plommehonning.jpg" alt="Ritzkjeks- og valnøttkake">
           </div>
       </a>
   </div>
   <div class="columns small-12 medium-8 large-8">
       <div class="row">
           <div class="columns small-12 recipe-info">
               <div class="recipe-title">
                   <a target="_top" href="https://www.oppskrift.no/oppskrift/plommehonning">Plommehonning</a>
               </div>
               <div class="row recipe-meta-info">
                   <div class="columns small-8 medium-6 small-centered">
                       <div class="row">
                           <div class="columns small-4 icon-wrap">
                               <span class="icon icon-easy-difficulty"></span>
                               <span class="recipe-meta-text">nivå</span>
                               <span class="recipe-meta-text">lett</span>
                           </div>
                           <div class="columns small-4 icon-wrap">
                               <span class="icon icon-cooking-time"></span>
                               <span class="recipe-meta-text">aktiv</span>
                               <span class="recipe-meta-text">30min</span>
                           </div>
                           <div class="columns small-4 icon-wrap">
                               <span class="icon icon-total-time"></span>
                               <span class="recipe-meta-text">totalt</span>
                               <span class="recipe-meta-text">40min</span>
                           </div>
                       </div>
                   </div>
               </div>
           </div>
               <div class="columns small-12 recipe-description">
                   <div class="row">
                       <div class="columns small-10 small-centered">Hjemmelaget plommehonning </div>
                   </div>
               </div>
           <div class="columns small-12">
               <a target="_top" class="recipe-link-button" href="https://www.oppskrift.no/oppskrift/plommehonning">
                   Se hele oppskriften
               </a>
           </div>
       </div>
   </div>
</div>