styleguide 0.30.11

33 - Review

33.1 - Review box

33.1.1 - Music review box

Use this in music review articles

In Colour

Jamie XX

6
« Resultatet er rett og slett strålende »
<article itemprop="review" itemscope itemtype="http://schema.org/Review" class="review small-12 medium-12 columns" >
        <div class="review-box culture-review-box" data-expand>
            <div class="review-image small-8 medium-9 small-centered columns">
                 <img itemprop="image" title="" alt="" src="https://upload.wikimedia.org/wikipedia/en/c/c2/Jamie_xx_-_In_Colour.png" />
            </div>
            <h1 itemprop="name" class="name review-name">In Colour</h1>
            <p class="creator" itemprop="creator">Jamie XX</p>
            <div class="rating-box small-centered columns">
                 <span itemprop="reviewRating" class="review-rating">6</span>     
                  <svg class="dice pink" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                     <rect class="face" x="0" y="0" width="100" height="100"></rect>
                     <path class="face-shade" d="M 0 0 L 100 0 L 0 100 z" />
                     <circle class="pip" cx="25" cy="25" r="10"/>
                     <circle class="pip" cx="25" cy="75" r="10"/>
                     <circle class="pip" cx="50" cy="50" r="10"/>
                     <circle class="pip" cx="75" cy="25" r="10"/>
                     <circle class="pip" cx="75" cy="75" r="10"/>
                  </svg>
            </div>
            <blockquote> <span>« </span> Resultatet er rett og slett strålende <span>»</span> </blockquote>
            <div class="centre">
              <a class="button outline tiny round toggle">+ Vis mer</a>
            </div>
            <div class="expandable">
              <p class="review-label">Sjanger</p>
              <div class="centre buttons">
                  <a itemprop="genre" class="button outline tiny round">Electronica</a>
                  <a itemprop="genre" class="button outline tiny round">Hip Hop</a> 
              </div>
               <p class="review-label">Plateselskap</p>
               <h2 class="record-label"> Young Turks/Playground </h2>
               <p class="review-label">Utgivelsesår</p>
               <h2 class="publish-date"> 2015 </h2>
            </div>
        </div>
</article>

33.1.2 - Book review box

Use this in book review articles

Ham on rye

Charles Bukowski

6
« Ham on Rye offers a crude, brutal, and savagely funny portrait of an outcast's coming-of-age during the desperate days of the Great Depression. »
<article itemprop="review" itemscope itemtype="http://schema.org/Review" class="review small-12 medium-12 columns">
  <div class="review-box culture-review-box" data-expand>
    <div class="review-image small-8 medium-9 small-centered columns">
      <img itemprop="image" title="" alt="" src="/assets/reviews/ham-on-rye.jpg" />
    </div>
    <h1 itemprop="name" class="name review-name">Ham on rye</h1>
    <p class="creator" itemprop="creator">Charles Bukowski</p>
    <div class="rating-box small-centered columns">
      <span itemprop="reviewRating" class="review-rating">6</span>     
      <svg class="dice pink" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
        <rect class="face" x="0" y="0" width="100" height="100"></rect>
        <path class="face-shade" d="M 0 0 L 100 0 L 0 100 z" />
        <circle class="pip" cx="25" cy="25" r="10"/>
        <circle class="pip" cx="25" cy="75" r="10"/>
        <circle class="pip" cx="50" cy="50" r="10"/>
        <circle class="pip" cx="75" cy="25" r="10"/>
        <circle class="pip" cx="75" cy="75" r="10"/>
      </svg>
    </div>
    <blockquote> <span>« </span> Ham on Rye offers a crude, brutal, and savagely funny portrait of an outcast's coming-of-age during the desperate days of the Great Depression. <span>»</span> </blockquote>
    <div class="centre">
      <a class="button outline tiny round toggle">+ Vis mer</a>
    </div>
    <div class="expandable">
      <p class="review-label">Sjanger</p>
      <div class="centre buttons">
        <a itemprop="genre" class="button outline tiny round">Fiksjon</a>
        <a itemprop="genre" class="button outline tiny round">Klassiker</a> 
      </div>
      <p class="review-label">Forlag</p>
      <h2 class="publisher"> Canongate </h2>
      <p class="review-label">Oversetter:</p>
      <h2 class="translator"> Navn på oversetter </h2>
      <p class="review-label">Utgivelsesår</p>
      <h2 class="publish-date"> 2015 </h2>
      <p class="review-label">ISBN</p>
      <h2 class="isbn">0-87685-558-3</h2>
    </div>
    <!-- Developer's note: Please note that this ISBN will fail -->
    <aside data-buy-the-book-ad="0-87685-558-3" class="buy-the-book-ad" itemscope itemtype="http://schema.org/WPAdBlock">
      <a class="button small expand warning" href="#">Kjøp boken hos ARK</a>
    </aside>
    <!-- Developer's note: Please note that this ISBN will succeed -->
    <aside data-buy-the-book-ad="9781782116660" class="buy-the-book-ad" itemscope itemtype="http://schema.org/WPAdBlock">
      <a class="button small expand warning" href="#">Kjøp boken hos ARK</a>
    </aside>
  </div>
</article>

33.1.3 - Film review box

Use this in film review articles

The nice guys

6
« The Nice Guys er en tøysete krimkomedie, med vekt på tøysete »
<article itemprop="review" itemscope itemtype="http://schema.org/Review" class="review small-12 medium-12 columns">
        <div class="review-box culture-review-box" data-expand>
            <div class="review-image small-8 medium-9 small-centered columns">
                 <img itemprop="image" title="" alt="" src="/assets/reviews/nice.jpg" />
            </div>
            <h1 itemprop="name" class="name review-name">The nice guys</h1>
            <div class="rating-box small-centered columns">
                 <span itemprop="reviewRating" class="review-rating">6</span>     
                  <svg class="dice pink" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                     <rect class="face" x="0" y="0" width="100" height="100"></rect>
                     <path class="face-shade" d="M 0 0 L 100 0 L 0 100 z" />
                     <circle class="pip" cx="25" cy="25" r="10"/>
                     <circle class="pip" cx="25" cy="75" r="10"/>
                     <circle class="pip" cx="50" cy="50" r="10"/>
                     <circle class="pip" cx="75" cy="25" r="10"/>
                     <circle class="pip" cx="75" cy="75" r="10"/>
                  </svg>
            </div>
            <blockquote> <span>« </span>The Nice Guys er en tøysete krimkomedie, med vekt på tøysete <span>»</span> </blockquote>
            <div class="centre">
              <a class="button outline tiny round toggle">+ Vis mer</a>
            </div>
            <div class="expandable">
              <p class="review-label">Sjanger</p>
              <div class="centre buttons">
                  <a itemprop="genre" class="button outline tiny round">Komedie</a>
                  <a itemprop="genre" class="button outline tiny round">Krim</a> 
              </div>
              <p class="review-label">Regi</p>
              <h2 class="director">Shane Black</h2>
              <p class="review-label">Skuespillere</p> 
              <h2 class="Actors"> Russel Crowe, Ryan Gosling </h2>
              <p class="review-label">Premieredato</p>
              <h2 class="premiere-date"> 16.August </h2>
              <p class="review-label">Aldersgrense</p>
              <h2 class="age-restriction"> 16år </h2>
              <p class="review-label">Orginaltittel</p>
              <h2 class="original-title"> «The nice guys » </h2>
            </div>
        </div>
</article>

33.1.4 - Concert / classical concert review box

Use this for concert reviews

The nice guys

6
« Insert a fancy quote here »
<article itemprop="review" itemscope itemtype="http://schema.org/Review" class="review small-12 medium-12 columns">
        <div class="review-box culture-review-box" data-expand>
            <h1 itemprop="name" class="name review-name with-margin">The nice guys</h1>
            <div class="rating-box small-centered columns">
                 <span itemprop="reviewRating" class="review-rating">6</span>     
                  <svg class="dice pink" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                     <rect class="face" x="0" y="0" width="100" height="100"></rect>
                     <path class="face-shade" d="M 0 0 L 100 0 L 0 100 z" />
                     <circle class="pip" cx="25" cy="25" r="10"/>
                     <circle class="pip" cx="25" cy="75" r="10"/>
                     <circle class="pip" cx="50" cy="50" r="10"/>
                     <circle class="pip" cx="75" cy="25" r="10"/>
                     <circle class="pip" cx="75" cy="75" r="10"/>
                  </svg>
            </div>
            <blockquote> <span>« </span> Insert a fancy quote here <span>»</span> </blockquote>
            <div class="centre">
              <a class="button outline tiny round toggle">+ Vis mer</a>
            </div>
            <div class="expandable">
              <p class="review-label">Sted</p>
              <h2><span class="venue">Oslo Konserthus</span>,<span class="city"> Oslo</span> </h2>
              <p class="review-label">Antall tilskuere</p> 
              <h2 class="attendants"> 10.483 </h2>
            </div>
        </div>
</article>

33.1.5 - Car review box

Use this in car review articles

Mercedes-Benz GLS

(2016)

245-415

HK

8s

0-100 km/t

175g

C02/km

Pris

575 000 - 845 000

6

Masse komfort, god plass, stille, fabelaktig girkasse

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

<div class="row">
  <article itemprop="review" itemscope itemtype="http://schema.org/Review" class="review small-12 medium-12 columns">
      <div class="review-box car-review-box" data-expand>
          <div class="review-image small-centered columns">
               <img itemprop="image" title="" alt="" src="http://pngimg.com/upload/car_logo_PNG1655.png" />
           </div>
           <h1 itemprop="name" class="name review-name">Mercedes-Benz GLS</h1>
           <p class="creator" itemprop="creator">(2016)</p>
           <div class="row">
             <div class="review-key-data text-center small-12 medium-12 small-centered columns">
                <div class="row">
                    <div class="small-4 columns">
                        <div class="gauge">
                          <div class="meter horsepower gauge-animation first one"></div>
                        </div>
                        <p>245-415</p>
                        <p class="sub">HK</p>
                    </div>
                    <div class="small-4 columns">
                        <div class="gauge">
                          <div class="meter speed gauge-animation second nine"></div>
                        </div>
                        <p>8s</p>
                        <p class="sub">0-100 km/t</p>
                    </div>
                    <div class="small-4 columns">
                        <div class="gauge">
                          <div class="meter co2 gauge-animation third four"></div>
                        </div>
                        <p>175g</p>
                        <p class="sub">C0<sub>2/km</p>
                    </div>
                </div>
            </div>
          </div>
          <div itemprop="offers" class="review-price text-center">
              <p class="review-label">Pris</p>
              <p class="price" itemprop="price">575 000 - 845 000</p>
          </div>
          <div class="rating-box small-12 small-centered columns">
            <span itemprop="reviewRating" class="review-rating">6</span>     
             <svg class="dice pink" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                <rect class="face" x="0" y="0" width="100" height="100"></rect>
                <path class="face-shade" d="M 0 0 L 100 0 L 0 100 z" />
                <circle class="pip" cx="25" cy="25" r="10"/>
                <circle class="pip" cx="25" cy="75" r="10"/>
                <circle class="pip" cx="50" cy="50" r="10"/>
                <circle class="pip" cx="75" cy="25" r="10"/>
                <circle class="pip" cx="75" cy="75" r="10"/>
             </svg>
          </div>
          <div class="review-pros-cons">
              <div class="columns small-centered">
                  <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="columns small-centered">
                  <div class="text-center">
                      <span class="icon-Thumb-down"></span>
                  </div>
                  <p itemprop="description">Lite praktiske løsninger og fleksibilitet innvendig, ikke S-Klasse nivå, dyr.</p>
              </div>
          </div>
      </div>
  </article>
  </div>

33.3 - Wine article

Desc comes here

Colombier Crozes–Hermitage

  • Rød
  • 2013
  • Rhône
  • Frankrike
  • Varenr.:947901
  • Anmeldt: 24.11.2015

PRIS: 249,90

En særegen grenache-dominert vin. Duft av jordbær, bringebær, lakris, krydder, urter, eukalyptus og florale toner. Fyldig med god syre. Bløte tanniner og saftig frukt med krydret avslutning.

6 Poeng: 86 ?

Passer til:

Svin Fugl Biff

Om Testen

Poengene er rent kvalitative og uavhengig av pris. «Value for money» er tatt hensyn til i terningkastene. Alle viner har en utgangsverdi på 50 poeng.

Slik tolkes poengene:

50-59:En uakseptabel vin. Dømt nord og ned.

60-69:En under gjennomsnittlig vin med merkbare mangler.

70-79:En middels vin på alle måter. Uten særpreg.

80-89:God til meget god vin. Uten merkbare feil eller mangler.

90-95:En fremragende vin av eksepsjonell kompleksitet og karakter.

96-100:Ekstraordinær vin med alt som forventes av en klassisk vin i sitt slag.

 <div class="row">
  <article class="article-wine-review">
     <div class="row">
         <div class="large-4 small-3 columns">
              <img itemprop="image" title="" alt="" src="http://bilder.vinmonopolet.no/cache/500x694-0/5045301-1.jpg" />
         </div>
         <div class="large-8 small-9 columns">
             <h1 itemprop="name" class="headline">Colombier Crozes–Hermitage</h1>
             <ul class="description-list">
               <li data-wine-color> <span class="color-icon wine-red"></span>Rød</li>
               <li data-wine-year>2013</li>
               <li data-wine-district>Rhône</li>
               <li data-wine-country>Frankrike</li>
               <li data-wine-part-number>Varenr.:947901</li>
               <li data-wine-review-date>Anmeldt: 24.11.2015</li>
             </ul>
             <div class="price-text">
               <p> PRIS: 249,90</p>
             </div>
             <p>En særegen grenache-dominert vin. Duft av jordbær, bringebær, lakris, krydder, urter, eukalyptus og florale toner. Fyldig med god syre. Bløte tanniner og saftig frukt med krydret avslutning.</p>
             <div class="rating-wrapper clearfix">
               <svg class="dice burgundy" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                 <rect class="face" x="0" y="0" width="100" height="100"></rect>
                 <path class="face-shade" d="M 0 0 L 100 0 L 0 100 z" />
                 <circle class="pip" cx="50" cy="50" r="12"/>
               </svg>
               <span itemprop="reviewRating" class="review-rating">6</span>        
               <span class="score">Poeng: 86</span> <a href="#" class="wine-score-lightbox button tiny round" data-reveal-id="myModal">?</a>
             </div>  
             <div class="tags">
                 <p>Passer til:</p>
                 <a class="button tag tiny round">Svin</a>
                 <a class="button tag tiny round">Fugl</a>
                 <a class="button tag tiny round">Biff</a>
             </div>
             <div class="tags">
                 <p>I disse listene:</p>
                 <a class="button tag tiny round">5 viner som passer til ribba</a>
                 <a class="button tag tiny round">Sesongens beste nykommere</a>
             </div>
         </div>
     </div>
  </article>
  <div id="myModal" class="reveal-modal small z-shadow-3" data-reveal>
    <h4 class="suber">Om Testen</h4>
    <p>Poengene er rent kvalitative og uavhengig av pris. «Value for money» er tatt hensyn til i terningkastene. Alle viner har en utgangsverdi på 50 poeng.</p>
    <p>Slik tolkes poengene:</p>
    <p><strong>50-59:</strong>En uakseptabel vin. Dømt nord og ned.</p>
    <p><strong>60-69:</strong>En under gjennomsnittlig vin med merkbare mangler.</p>
    <p><strong>70-79:</strong>En middels vin på alle måter. Uten særpreg.</p>
    <p><strong>80-89:</strong>God til meget god vin. Uten merkbare feil eller mangler.</p>
    <p><strong>90-95:</strong>En fremragende vin av eksepsjonell kompleksitet og karakter.</p>
    <p><strong>96-100:</strong>Ekstraordinær vin med alt som forventes av en klassisk vin i sitt slag.</p>
    <a class="close-reveal-modal"><span class="icon-Close"></span></a>
  </div>
 </div>

33.4 - Wine list / Article preview

Grid/list with wines and drinks. Use as an article preview ie. "related wines" in articles and the article library.

  • Colombier Crozes–Hermitage

    • Rød
    • 2013
    • Rhône
    • Frankrike

    249,90

    Poeng: 86
    5
  • Alleno & Chapoutier Côtes du Rhône

    • Rød
    • 2013
    • Rhône Sør
    • Frankrike

    249,90

    Poeng: 86
    5
  • Cave de Tain Nobles Rives Syrah

    • Rød
    • 2013
    • Rhône Sør
    • Frankrike

    249,90

    Poeng: 86
    5
  • André Chatenoud Ch. de Bellevue 2008

    • Rød
    • 2008
    • Bordeaux
    • Frankrike

    249,90

    Poeng: 86
    5
  • Blason d`Issan

    • Dyp gul
    • 2010
    • Bordeaux
    • Frankrike

    249,90

    Poeng: 86
    5
  • Brio de Cantenac Brown

    • Hvit
    • 2010
    • Bordeaux
    • Frankrike

    249,90

    Poeng: 86
    5
<ul class="review-grid small-block-grid-1 medium-block-grid-2 large-block-grid-3">
 <li>
   <article class="preview-wine-review">
     <div class="row">
       <div class="photo small-3 medium-12 columns">
         <img itemprop="image" title="" alt="" src="http://bilder.vinmonopolet.no/cache/500x694-0/5045301-1.jpg" />
       </div>
       <div class="small-9 medium-12 columns">
         <h1 itemprop="name" class="headline">Colombier Crozes–Hermitage</h1>
         <ul class="description-list">
           <li data-wine-color> <span class="color-icon wine-red"></span>Rød</li>
           <li data-wine-year>2013</li>
           <li data-wine-district>Rhône</li>
           <li data-wine-country>Frankrike</li>
         </ul>
         <div class="price-text">
          <p> 249,90</p>
         </div>
         <div class="rating-wrapper clearfix">
           <svg class="dice burgundy" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
             <rect class="face" x="0" y="0" width="100" height="100"></rect>
             <path class="face-shade" d="M 0 0 L 100 0 L 0 100 z" />
             <circle class="pip" cx="25" cy="25" r="10"/>
             <circle class="pip" cx="25" cy="75" r="10"/>
             <circle class="pip" cx="50" cy="50" r="10"/>
             <circle class="pip" cx="75" cy="25" r="10"/>
             <circle class="pip" cx="75" cy="75" r="10"/>
           </svg>
           <span class="score">Poeng: 86</span>
         </div>
         <span itemprop="reviewRating" class="review-rating">5</span>             
       </div>
     </div>
   </article>
 </li>
 <li>
   <article class="preview-wine-review">
     <div class="row">
       <div class="photo small-3 medium-12 columns">
         <img itemprop="image" title="" alt="" src="http://bilder.vinmonopolet.no/cache/270x375-0/430301-1.jpg" />
       </div>
       <div class="small-9 medium-12 columns">
         <h1 itemprop="name" class="headline">Alleno &amp; Chapoutier Côtes du Rhône</h1>
         <ul class="description-list">
           <li data-wine-color> <span class="color-icon wine-red"></span>Rød</li>
           <li data-wine-year>2013</li>
           <li data-wine-district>Rhône Sør</li>
           <li data-wine-country>Frankrike</li>
         </ul>
         <div class="price-text">
           <p> 249,90</p>
         </div>
         <div class="rating-wrapper clearfix">
           <svg class="dice burgundy" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
           <rect class="face" x="0" y="0" width="100" height="100"></rect>
           <path class="face-shade" d="M 0 0 L 100 0 L 0 100 z" />
           <circle class="pip" cx="25" cy="25" r="10"/>
           <circle class="pip" cx="25" cy="75" r="10"/>
           <circle class="pip" cx="50" cy="50" r="10"/>
           <circle class="pip" cx="75" cy="25" r="10"/>
           <circle class="pip" cx="75" cy="75" r="10"/>
           </svg>
           <span class="score">Poeng: 86</span>  
         </div>
         <span itemprop="reviewRating" class="review-rating">5</span>             
       </div>
     </div>
   </article>
 </li>
 <li>
   <article class="preview-wine-review">
     <div class="row">
     <div class="photo small-3 medium-12 columns">
       <img itemprop="image" title="" alt="" src="http://bilder.vinmonopolet.no/cache/270x375-0/4106201-1.jpg" />
     </div>
       <div class="small-9 medium-12 columns">
         <h1 itemprop="name" class="headline">Cave de Tain Nobles Rives Syrah</h1>
         <ul class="description-list">
           <li data-wine-color> <span class="color-icon wine-red"></span>Rød</li>
           <li data-wine-year>2013</li>
           <li data-wine-district>Rhône Sør</li>
           <li data-wine-country>Frankrike</li>
         </ul>
         <div class="price-text">
           <p> 249,90</p>
         </div>
         <div class="rating-wrapper clearfix">
           <svg class="dice burgundy" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
             <rect class="face" x="0" y="0" width="100" height="100"></rect>
             <path class="face-shade" d="M 0 0 L 100 0 L 0 100 z" />
             <circle class="pip" cx="25" cy="25" r="10"/>
             <circle class="pip" cx="25" cy="75" r="10"/>
             <circle class="pip" cx="50" cy="50" r="10"/>
             <circle class="pip" cx="75" cy="25" r="10"/>
             <circle class="pip" cx="75" cy="75" r="10"/>
           </svg>
           <span class="score">Poeng: 86</span>
         </div>
         <span itemprop="reviewRating" class="review-rating">5</span>             
       </div>
     </div>
   </article>
 </li>
 <li>
   <article class="preview-wine-review">
     <div class="row">
       <div class="photo small-3 medium-12 columns">
         <img itemprop="image" title="" alt="" src="http://bilder.vinmonopolet.no/cache/270x375-0/855901-1.jpg" />
       </div>
       <div class="small-9 medium-12 columns">
         <h1 itemprop="name" class="headline">André Chatenoud Ch. de Bellevue 2008</h1>
         <ul class="description-list">
           <li data-wine-color> <span class="color-icon wine-red"></span>Rød</li>
           <li data-wine-year>2008</li>
           <li data-wine-district>Bordeaux</li>
           <li data-wine-country>Frankrike</li>
         </ul>
         <div class="price-text">
           <p> 249,90</p>
         </div>
         <div class="rating-wrapper clearfix">
           <svg class="dice burgundy" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
             <rect class="face" x="0" y="0" width="100" height="100"></rect>
             <path class="face-shade" d="M 0 0 L 100 0 L 0 100 z" />
             <circle class="pip" cx="25" cy="25" r="10"/>
             <circle class="pip" cx="25" cy="75" r="10"/>
             <circle class="pip" cx="50" cy="50" r="10"/>
             <circle class="pip" cx="75" cy="25" r="10"/>
             <circle class="pip" cx="75" cy="75" r="10"/>
           </svg>
           <span class="score">Poeng: 86</span>
         </div>
         <span itemprop="reviewRating" class="review-rating">5</span>             
       </div>
     </div>
   </article>
 </li>
 <li>
   <article class="preview-wine-review">
     <div class="row">
       <div class="photo small-3 medium-12 columns">
         <img itemprop="image" title="" alt="" src="http://bilder.vinmonopolet.no/cache/270x375-0/2840301-1.jpg" />
       </div>
       <div class="small-9 medium-12 columns">
         <h1 itemprop="name" class="headline">Blason d`Issan</h1>
         <ul class="description-list">
           <li data-wine-color> <span class="color-icon beer-ipa"></span>Dyp gul</li>
           <li data-wine-year>2010</li>
           <li data-wine-district>Bordeaux</li>
           <li data-wine-country>Frankrike</li>
         </ul>
         <div class="price-text">
           <p> 249,90</p>
         </div>
         <div class="rating-wrapper clearfix">
           <svg class="dice burgundy" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
             <rect class="face" x="0" y="0" width="100" height="100"></rect>
             <path class="face-shade" d="M 0 0 L 100 0 L 0 100 z" />
             <circle class="pip" cx="25" cy="25" r="10"/>
             <circle class="pip" cx="25" cy="75" r="10"/>
             <circle class="pip" cx="50" cy="50" r="10"/>
             <circle class="pip" cx="75" cy="25" r="10"/>
             <circle class="pip" cx="75" cy="75" r="10"/>
           </svg>
           <span class="score">Poeng: 86</span>
         </div>
         <span itemprop="reviewRating" class="review-rating">5</span>             
       </div>
     </div>
   </article>
 </li>
 <li>
 <article class="preview-wine-review">
   <div class="row">
     <div class="photo small-3 medium-12 columns">
       <img itemprop="image" title="" alt="" src="http://bilder.vinmonopolet.no/cache/270x375-0/2069501-1.jpg" />
     </div>
     <div class="small-9 medium-12 columns">
       <h1 itemprop="name" class="headline">Brio de Cantenac Brown</h1>
       <ul class="description-list">
         <li data-wine-color> <span class="color-icon wine-white"></span>Hvit</li>
         <li data-wine-year>2010</li>
         <li data-wine-district>Bordeaux</li>
         <li data-wine-country>Frankrike</li>
       </ul>
       <div class="price-text">
         <p> 249,90</p>
       </div>
       <div class="rating-wrapper clearfix">
         <svg class="dice burgundy" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
           <rect class="face" x="0" y="0" width="100" height="100"></rect>
           <path class="face-shade" d="M 0 0 L 100 0 L 0 100 z" />
           <circle class="pip" cx="25" cy="25" r="10"/>
           <circle class="pip" cx="25" cy="75" r="10"/>
           <circle class="pip" cx="50" cy="50" r="10"/>
           <circle class="pip" cx="75" cy="25" r="10"/>
           <circle class="pip" cx="75" cy="75" r="10"/>
         </svg>
         <span class="score">Poeng: 86</span>
       </div>
       <span itemprop="reviewRating" class="review-rating">5</span>             
     </div>
   </div>
 </article>
 </li>
</ul>

33.5 - Frontpage review

<article class="preview front-review small-12 columns" itemscope="" itemtype="http://schema.org/NewsArticle" role="article" data-id="3074764762">
  <a itemprop="url">
    <div class="relative-helper">
      <div class="article-image-wrap">   
        <img itemprop="image" title="" alt="" src="/assets/reviews/gameofthrones.jpg">
        <div class="overlay black"></div>
        <svg class="dice pink right" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
          <rect class="face" x="0" y="0" width="100" height="100"></rect>
          <path class="face-shade" d="M 0 0 L 100 0 L 0 100 z" />
          <circle class="pip" cx="25" cy="25" r="10"/>
          <circle class="pip" cx="25" cy="75" r="10"/>
          <circle class="pip" cx="50" cy="50" r="10"/>
          <circle class="pip" cx="75" cy="25" r="10"/>
          <circle class="pip" cx="75" cy="75" r="10"/>
        </svg>
        <div class="label-wrap hide-for-medium-up">
          <span class="label culture-review">Bokanmeldelse</span>
          <span class="label-text">«Ridderen av De syv riker: historiens begynnelse»</span>
        </div>
      </div> 
      <div class="text-wrap">
        <div class="label-wrap hide-for-small clearfix">
          <span class="label culture-review">Bokanmeldelse</span>
          <span class="label-text">«Ridderen av De syv riker: historiens begynnelse»</span>
        </div>
        <h1 itemprop="headline" class="headline">Lengter du etter fortsettelsen på «Game of Thrones»? Les denne</h1>
      </div>
      <time itemprop="datePublished" class="published" datetime="1995-03-08" title="Publisert 08.03.1995">onsdag 8. mars 1995</time>
    </div>
  </a>
</article>

33.6 - Front Review Variation

<div class="row">
  <article class="preview front-review large-12 medium-12 small-12 columns" itemscope itemtype="http://schema.org/NewsArticle" role="article">
    <a itemprop="url">
      <svg class="dice pink right" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
        <rect class="face" x="0" y="0" width="100" height="100"></rect>
        <path class="face-shade" d="M 0 0 L 100 0 L 0 100 z" />
        <circle class="pip" cx="25" cy="25" r="10"/>
        <circle class="pip" cx="25" cy="75" r="10"/>
        <circle class="pip" cx="50" cy="50" r="10"/>
        <circle class="pip" cx="75" cy="25" r="10"/>
        <circle class="pip" cx="75" cy="75" r="10"/>
      </svg>
      <img itemprop="image" title="" alt="" src="/assets/test/978x.jpg">
      <h2 class="deck">«RIDDEREN AV DE SYV RIKER: HISTORIENS BEGYNNELSE»</h2>
      <h1 itemprop="headline" class="headline">Lengter du etter fortsettelsen på «Game of Thrones»? Les denne</h1>
      <span class="label culture-review">Plateanmeldelse</span>
    </a>
  </article>
</div>

33.7 - Drink colors

Color profile on the drinks in reviews

$wine-red
$wine-white
$beer-blonde
$beer-light
$beer-ipa
$beer-amber;
$beer-brown-light
$beer-brown-dark
$beer-black
$sour-red
<div class="styleguide-color-bar wine-red">$wine-red</div>
<div class="styleguide-color-bar wine-white">$wine-white</div>
<div class="styleguide-color-bar beer-blonde">$beer-blonde</div>
<div class="styleguide-color-bar beer-light">$beer-light</div>
<div class="styleguide-color-bar beer-ipa">$beer-ipa</div>
<div class="styleguide-color-bar beer-amber">$beer-amber;</div>
<div class="styleguide-color-bar beer-brown-light">$beer-brown-light</div>
<div class="styleguide-color-bar beer-brown-dark">$beer-brown-dark</div>
<div class="styleguide-color-bar beer-black">$beer-black</div>
<div class="styleguide-color-bar sour-red">$sour-red</div>

33.8 - Prisjakt product-ad

Element for showing prisjakt, which compares the price on different products/services. 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>