Styleguide 0.28.5

31 - Reviews

31.1 - Review-box

Basic review element for articles, the element can be used in various widths with a simple grid change

Testresultat

Asus EeeBook E200HA

Masse komfort, god plass, stille, fabelaktig girkasse

Liten, god lyd, god garanti
Mye annet bra
Og enda litt til faktisk

Litt vanskelig å bruke

 <div class="row">
   <div itemprop="review" class="review dinside-review small-12 columns">
     <div class="hidden" itemprop="reviewRating" itemscope="" itemtype="http://schema.org/Rating">
       <meta itemprop="worstRating" content="1">
       <meta itemprop="ratingValue" content="3">
       <meta itemprop="bestRating" content="6">
     </div>
     <div>
       <div class="review-box">
         <header class="review-box__header">
           <div>
             <p class="test-result">Testresultat</p>
             <h1 class="name review-name">
               <span itemprop="name">Asus EeeBook E200HA</span>
             </h1>
           </div>
           <img src="../assets/icon/dices/6.svg" alt="">
         </header>
         <div class="review-box__content" itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
           <div class="review-box__meta">
             <figure class="review-image">
               <img src="../assets/cars/merc-glk.jpg" alt="">
             </figure>
             <blockquote>Masse komfort, god plass, stille, fabelaktig girkasse</blockquote>
           </div>
           <div class="review-box__spread">
             <div class="review-box__text">
               <div class="icon-Thumb-up text-green"></div>
               <p itemprop="description" class="review-pros">Liten, god lyd, god garanti<br>Mye annet bra<br>Og enda litt til faktisk</p>
             </div>
             <div class="review-box__text">
               <div class="icon-Thumb-down text-red"></div>
               <p itemprop="description" class="review-cons">Litt vanskelig å bruke</p>
             </div>
           </div>
         </div>
         <footer class="review-box__footer">
           <a href="https://www.dinside.no/tester">Se alle våre tester</a>
         </footer>
       </div>
     </div>
   </div>
 </div>

31.2 - Prisjakt product-ad

Element for showing the last reviews. Can be used on the frontpage or in an article

.fullwidth

Show the "default" version with fullwidth blocks on all sizes.

.compact

Kompakt versjon av prisboksen for mer plass på mobil eller steder man trenger flere bokser.

.strip

Stripe med ett produkt for "superduper kompakt" utseende.

<aside class="prisjakt {$modifiers} small-12 columns">
    <div class="product-specs">
        <p class="review-label">Detaljer</p>
        <h3><span>Sony GTK-XB7</span></h3>
        <p class="description">Bluetooth, Sort, Blå, Rød, 470 W, USB-kontakt<br>
        <a class="more-link" href="http://www.prisjakt.no/product.php?p=3583043&amp;ref=218">Mer info på prisjakt.no</a></p>
    </div>
    <div class="product-shops">
        <span class="review-label">De billigste butikkene</span>
        <a href="#" class="prisjakt-link">Se alle prisene</a>
        <ol class="shop-list">
            <li>
                <a href="#"itemscope itemtype="http://schema.org/Offer">
                    <span class="item">Spaceworld Soundgarden</span>
                    <span class="cost">3390,-</span>
                </a>
            </li>
            <li>
                <a href="#"itemscope itemtype="http://schema.org/Offer">
                    <span class="item">CDON</span>
                    <span class="cost">3395,-</span>
                </a>
            </li>
            <li>
                <a href="#"itemscope itemtype="http://schema.org/Offer">
                    <span class="item">Elkjøp</span>
                    <span class="cost">3395,-</span>
                </a>
            </li>
        </ol>
    </div>
    <div class="product-logo">
        <p class="review-label"><small> Levert av </small></p>
        <a class="prisjakt-link" href="http://www.prisjakt.no">
          <img class="prisjakt-logo" src="/assets/logo/prisjakt-logo.png" alt="Prisjakt logo">
        </a>
    </div>
</aside>

31.3 - Last reviews collection

Element for showing the last reviews. Can be used on the frontpage or in an article

<div class="row">
   <div class="testbox-front small-only-12 columns">
       <div class="inside-first">
           <h3>Siste tester fra <b>Din</b>side</h3>
           <a href="/tester/" class="lesmer top">Se alle testene</a>
           <article>
               <a href="#">
                   <img src="http://bilde.dinside.no/el-sykkel-test+haibike+sduro+trekking+rc+2016.jpg?o=5334796&amp;w=410&amp;h=230&amp;ee=1461756111">
                   <h1>TEST: Haibike Sduro Trekking RC 2016</h1>
                   <p>Noe i nærheten av en perfekt elsykkel.</p>
               </a>
           </article>
       </div>
       <div class="inside-second">
               <ul class="testlist">
                   <li>
                       <a href="#">
                           <img src="http://bilde.dinside.no/test+apple+ipad+pro+med+97-tommers+skjerm.jpg?o=5334896&amp;w=140&amp;h=90&amp;ee=1461827512">
                           <h4>TEST: Apple iPad Pro med 9,7-tommers skjerm</h4>
                           <p>Topp skjerm, kameraer og lyd - men stiv pris.</p>
                       </a>
                   </li>
                   <li>
                       <a href="#">
                           <img src="http://bilde.dinside.no/test-holder+det+g%E5ende+i+et+d%F8gn.jpg?o=5331356&amp;w=140&amp;h=90&amp;ee=1460468561">
                           <h4>Holder det gående i et døgn</h4>
                           <p>Kan spille musikk i et døgn og lades bare på tre timer.</p>
                       </a>
                   </li>
                   <li>
                       <a href="#">
                           <img src="http://bilde.dinside.no/test+apple+iphone+se.jpg?o=5332391&amp;w=140&amp;h=90&amp;ee=1460720121" data-pin-nopin="true">
                           <h4>TEST: Apple iPhone SE</h4>
                           <p>Den beste «lille» smarttelefonen akkurat nå.</p>
                       </a>
                   </li>
                   <li>
                       <a href="#">
                           <img src="http://bilde.dinside.no/test-huawei+p9.jpg?o=5331127&amp;w=140&amp;h=90&amp;ee=1460448574">
                           <h4>Huawei P9</h4>
                           <p>Har to kameraer på baksiden noe for seg?</p>
                       </a>
                   </li>
                   <a class="text-blue" href="/tester/" class="lesmer last">Se alle testene</a>
               </ul>
       </div>
   </div>
</div>

31.4 - Review Preview

Element for showing the last reviews in a search lookup page or other lists. Articles in the list can be hightlighted with a review score/dice using .dice-1.dice-1....dice-6

.dice-1

Review with score 1 (lowest)

.dice-6

Review with score 6 (highest)

.dice-multi

Review with multipe scores (assorted)

<div class="row">
  <article class="columns large-4 small-6 review-preview {$modifiers}">
    <a href="#">
      <figure>
        <img src="/assets/cars/audi-q7.jpg">
      </figure>
      <h2>Audi</h2>
      <h1>q7</h1>
      <ul>
        <li>Fra 575 000</li>
      </ul>
    </a>
  </article>
  <article class="columns large-4 small-6 review-preview {$modifiers}">
    <a href="#">
      <figure>
        <img src="/assets/cars/merc-s-class.jpg">
      </figure>
      <h2>Merchedes Benz</h2>
      <h1>S-klasse</h1>
      <ul>
        <li>Fra 675 000</li>
      </ul>
    </a>
  </article>
  <article class="columns large-4 small-6 review-preview {$modifiers}">
    <a href="#">
      <figure>
        <img src="/assets/cars/merc-glk.jpg">
      </figure>
      <h2>Merchedes Benz</h2>
      <h1>GLK</h1>
      <ul>
        <li>Fra 485 000</li>
      </ul>
    </a>
  </article>
</div>

31.5 - Review list

List reviews.

.light

light theme

<aside class="review-list {$modifiers} large-6 small-12 medium-12 columns">
  <div class="content">
   <h5 class="title">Siste hodetelefontester</h5>
   <ol class="article-list no-bullet">
       <li>
           <a href="https://www.dinside.no/a/69631319">
               <img src="//dbstatic.no/?imageId=69636339&width=350">
               <div class="text-block">
                   <p class="title">Beats Studio3 Wireless</p>
                   <p class="subtitle">Beats Studio3 Wireless er vel verdt å vurdere om du har lyst på nye hodetelefoner</p>
               </div>
               <img class="dice" src="//www.dagbladet.no/app/showcasr/public/assets/dice/5.svg" alt="">
           </a>
       </li>
       <li>
           <a href="https://www.dinside.no/a/69369333">
               <img src="//dbstatic.no/?imageId=69393088&width=350">
               <div class="text-block">
                   <p class="title">Kygo A9/600</p>
                   <p class="subtitle">Toppmodellen fra Kygo er en helt ålreit hodetelefon med litt for høy pris.</p>
               </div>
               <img class="dice" src="//www.dagbladet.no/app/showcasr/public/assets/dice/4.svg" alt="">
           </a>
       </li>
           <li>
           <a href="https://www.dinside.no/a/68935669">
               <img src="//dbstatic.no/?imageId=68940000&width=350">
               <div class="text-block">
                   <p class="title">Bowers and Wilkins PX</p>
                   <p class="subtitle">Britenes første hodesett med trådløs støydemping låter rett og slett knallbra.</p>
               </div>
               <img class="dice" src="//www.dagbladet.no/app/showcasr/public/assets/dice/5.svg" alt="">
           </a>
       </li>
   </ol>
   <a href="//www.dinside.no/tester" class="review-url">Se alle tester</a>
  </div>
</aside>