styleguide 0.30.11

42 - Oppskrift.no latest articles (oppskrift_foodbox)

The Foodbox contains latest N articles (configured 5 by default) from Oppskrift.no website (site_id=106). It can support both article previews (image + title) and rich previews which will include subtitle. Example without subtitles:

Markup:

Example with subtitles:

 <div class="foodbox">
   <h4 class="foodbox-title">
       <img style="top: -4px; position: relative;" src="//oppskrift.no/static/www.oppskrift.no/icons/brand-mobile.svg">
       <span>Oppskrift.no</span>
   </h4>
   <div class="copy">
       <ol class="article-list no-bullet">
           <li>
               <a href="/artikkelbeste-oppskrifter-pa-kylling-her-er-de/70131673">
                   <div class="article-preview">
                               <img class="article-preview-image" src="//dbstatic.no?imageId=70136315&amp;panoy=11.450381679389&amp;panox=12.219101123596&amp;panow=78.651685393258&amp;panoh=74.809160305344&amp;heightx=0&amp;heighty=0&amp;heightw=0&amp;heighth=0&amp;width=150&amp;height=90">
                       <div class="article-info-section">
                           <p class="article-title">Beste oppskrifter på kylling? Her er de</p>
                               <p class="subtitle">Så sprø og saftig kylling kan du få uten å fritere.</p>
                       </div>
                   </div>
               </a>
           </li>
           <li>
               <a href="/artikkelse-hvor-god-kjottdeigmiddagen-kan-vaere/68623695">
                   <div class="article-preview">
                               <img class="article-preview-image" src="//dbstatic.no?imageId=68624066&amp;panoy=0&amp;panox=0&amp;panow=0&amp;panoh=0&amp;heightw=0&amp;heighth=0&amp;heighty=0&amp;heightx=0&amp;width=150&amp;height=90">
                       <div class="article-info-section">
                           <p class="article-title">Se hvor god kjøttdeigmiddagen kan være</p>
                               <p class="subtitle">Tipper du ikke har laget halvparten!</p>
                       </div>
                   </div>
               </a>
           </li>
           <li>
               <a href="/artikkelfem-oppskrifter-med-sjokolade-du-ikke-har-tenkt-pa/70133308">
                   <div class="article-preview">
                               <img class="article-preview-image" src="//dbstatic.no?imageId=70133379&amp;panox=0&amp;panow=0&amp;panoh=0&amp;panoy=0&amp;heightx=0&amp;heightw=0&amp;heighth=0&amp;heighty=0&amp;width=150&amp;height=90">
                       <div class="article-info-section">
                           <p class="article-title">Fem oppskrifter med sjokolade du ikke har tenkt på</p>
                               <p class="subtitle">Ikke mange vet hvor enkelt det å lage så gode ting med sjokolade.</p>
                       </div>
                   </div>
               </a>
           </li>
           <li>
               <a href="/artikkelnorsk-lam-er-nam/70131641">
                   <div class="article-preview">
                               <img class="article-preview-image" src="//dbstatic.no?imageId=69645414&amp;panox=0&amp;panoy=0&amp;panow=0&amp;panoh=0&amp;heighth=0&amp;heighty=0&amp;heightx=0&amp;heightw=0&amp;width=150&amp;height=90">
                       <div class="article-info-section">
                           <p class="article-title">Norsk lam er nam</p>
                               <p class="subtitle">Endelig er det ferske, norsk lammekjøttet her! Her får du kjempegode middagsretter med lam i mange varianter, så ikke nøl med å invitere venner og familie på et festmåltid</p>
                       </div>
                   </div>
               </a>
           </li>
           <li>
               <a href="/artikkelbak-de-aller-beste-eplekakene/70132761">
                   <div class="article-preview">
                               <img class="article-preview-image" src="//dbstatic.no?imageId=67806209&amp;panox=0&amp;panow=0&amp;panoh=0&amp;panoy=0&amp;heighty=0&amp;heightx=0&amp;heightw=0&amp;heighth=0&amp;width=150&amp;height=90">
                       <div class="article-info-section">
                           <p class="article-title">Bak de aller beste eplekakene</p>
                               <p class="subtitle">Nyt disse knallgode kakene mens de er lunkne – og fyll fryseren med flere. Nå er det høysesong for kortreiste norske epler!</p>
                       </div>
                   </div>
               </a>
           </li>
       </ol>
       <a class="button expand radius warning" href="/artikler">Alle matartikler</a>
   </div>
 </div>