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

Lite praktiske løsninger og fleksibilitet innvendig, ikke S-Klasse nivå, dyr.

 <div class="row">
   <div itemprop="review" class="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 class="small-12 medium-12 large-12 columns test-result"><p>Testresultat</p></div>
     <div class="review-box">
       <h1 itemprop="name" class="name review-name"><strong>Asus EeeBook E200HA</h1></strong>
       <div class="rating-box small-centered columns">
         <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
           <div class="dice">
             <img src="../assets/icon/dices/6.svg" alt="">
           </div>
         </div>
       </div>
       <div class="row review-pros-cons">
           <div class="small-12 medium-6 column">
             <div class="text-center">
               <span class="icon-Thumb-up"></span>
                 </div>
                  <p itemprop="description">Masse komfort, god plass, stille, fabelaktig girkasse</p>       
             </div> 
           <div class="small-12 medium-6 column">
             <div class="text-center">
               <span class="icon-Thumb-down"></span>
             </div>
             <p class="last" itemprop="description">Lite praktiske løsninger og fleksibilitet innvendig, ikke S-Klasse nivå, dyr.</p>
           </div>   
       </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>vi</b>.no</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>