Styleguide 0.30.7

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 »
+ Vis mer 
<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. »
+ Vis mer 
<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 »
+ Vis mer 
<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 »
+ Vis mer 
<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

I disse listene:

5 viner som passer til ribba Sesongens beste nykommere

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>