34 - Recipe preview box
The RecipeBox element is a preview of recipe from oppskrift.no website.
<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>