styleguide 0.30.11

33 - Review

33.1 - Review box

33.1.1 - Music review box

Use this in music review articles

Kvelertak

Meir

6 1 6

Metal/hardrock

2013
Plateselskap:

Roadrunner Records

« Med andre ord, det beste Kvelertak kan gjøre med saken er rett og slett å senke skuldrene og gjøre mer av det samme »
Se alle anmeldelser 
<article itemprop="review" itemscope="" itemtype="http://schema.org/Review" class="review columns large-6 small-12 medium-12">
	<div class="review-box culture-review-box ">
		<div class="review-image">
			<img itemprop="image" title="" alt="" src="//www.metalsucks.net/wp-content/uploads/2013/02/Kvelertak-Meir.jpg" class="">
		</div>
		<div class="clearfix">
			<div class="titles">
				<h1 itemprop="name" class="name review-name "><span>Kvelertak</span></h1>
				<p class="creator" itemprop="creator">Meir</p>
			</div>
			<div class="rating-box">
				<span itemprop="reviewRating" itemscope="" itemtype="http://schema.org/Rating" class="review-rating">
					<span itemprop="ratingValue">6</span>
					<span itemprop="worstRating">1</span>
					<span itemprop="bestRating">6</span>
				</span>
				<span itemprop="author" itemscope="" itemtype="http://schema.org/Person">
					<meta itemprop="name" content="">
				</span>
			<svg class="dice" width="60px" height="60px" 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"></path><circle class="pip" cx="25" cy="25" r="10"></circle><circle class="pip" cx="25" cy="50" r="10"></circle><circle class="pip" cx="25" cy="75" r="10"></circle><circle class="pip" cx="75" cy="25" r="10"></circle><circle class="pip" cx="75" cy="50" r="10"></circle><circle class="pip" cx="75" cy="75" r="10"></circle></svg>
			</div>
		</div>
		<div class="field">
			<h2 class="review-categories category">Metal/hardrock</h2>
			<span class="review-time">2013</span>
		</div>
		<div class="field">
			<span class="review-label">Plateselskap:</span>
			<h2 class="review-recordlabel">Roadrunner Records</h2>
		</div>
			<blockquote>« <span>Med andre ord, det beste Kvelertak kan gjøre med saken er rett og slett å senke skuldrene og gjøre mer av det samme</span> »</blockquote>
		<a href="https://www.dagbladet.no/anmeldelser" class="external-link">Se alle anmeldelser</a>
	</div>
</article>

33.1.2 - Book review box

Use this in book review articles

Harry Potter og de Vises Stein

JK. Rowling

5 1 6
+ Vis mer
« Den første boken om Harry Potter er ganske bra! »
Se alle anmeldelser 
<article itemprop="review" itemscope="" itemtype="http://schema.org/Review" class="review columns large-6 small-12 medium-6">
	<div class="review-box culture-review-box " data-expand="">
		<div class="review-image">
			<img itemprop="image" title="" alt="" src="//www.tanum.no/sek-asset/products/9788273848031.jpg?w=960" class="">
		</div>
		<div class="clearfix">
			<div class="titles">
				<h1 itemprop="name" class="name review-name ">Harry Potter og de Vises Stein</h1>
				<p class="creator" itemprop="creator">JK. Rowling
			</p></div>
			<div class="rating-box">
				<span itemprop="reviewRating" itemscope="" itemtype="http://schema.org/Rating" class="review-rating">
					<span itemprop="ratingValue">5</span>
					<span itemprop="worstRating">1</span>
					<span itemprop="bestRating">6</span>
				</span>
				<span itemprop="author" itemscope="" itemtype="http://schema.org/Person">
					<meta itemprop="name" content="">
				</span>
				<svg class="dice" width="60px" height="60px" 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"></path><circle class="pip" cx="25" cy="25" r="10"></circle><circle class="pip" cx="25" cy="75" r="10"></circle><circle class="pip" cx="50" cy="50" r="10"></circle><circle class="pip" cx="75" cy="25" r="10"></circle><circle class="pip" cx="75" cy="75" r="10"></circle></svg>
			</div>
		</div>
		<div class="centre">
			<a class="button outline tiny round toggle">+ Vis mer</a>
		</div>
		<div class="expandable">
			<div class="field">
				<h2 class="review-categories category">Eventyr</h2>
				<span class="review-time">1999</span>
			</div>
			<div class="field">
				<span class="review-label">Forlag:</span>
				<h2 class="review-publisher">Aschehoug</h2>
			</div>
				<div class="field">
					<span class="review-label">Oversetter:</span>
					<h2 class="review-translator">Arne Brimi</h2>
				</div>
			<div class="field">
				<span class="review-label">Utgivelsesår:</span>
				<h2 class="review-publish-date">2018</h2>
			</div>
		</div>
			<blockquote>« <span>Den første boken om Harry Potter er ganske bra!</span> »</blockquote>
			<aside data-buy-the-book-ad="9788202434687" class="buy-the-book-ad adunit" itemscope="" itemtype="http://schema.org/WPAdBlock" style="display: none;">&lt;!-- Could not load data from API --&gt;</aside>
		<a href="https://www.dagbladet.no/anmeldelser" class="external-link">Se alle anmeldelser</a>
	</div>
</article>

33.1.3 - Film review box

Use this in film review articles

Ringenes Herre: Ringens Brorskap

5 1 6

Eventyr

2002
Regi:

Peter Jackson

Skuespillere:

Elijah Woods, Viggo Mortensen

Premieredato:

21.12.2002

Aldersgrense:

12+

Orginaltittel:

Lord of the Rings: Fellowship of the Ring

« Fly, you fools! »
Se alle anmeldelser 
<article itemprop="review" itemscope="" itemtype="http://schema.org/Review" class="review columns large-6 small-12 medium-6 ">
	<div class="review-box culture-review-box ">
		<div class="review-image">
			<img itemprop="image" title="" alt="" src="https://ewedit.files.wordpress.com/2016/04/image-tout.jpg?w=612" class="">
		</div>
		<div class="clearfix">
			<div class="titles">
				<h1 itemprop="name" class="name review-name "><span>Ringenes Herre: Ringens Brorskap</span></h1>
			</div>
			<div class="rating-box">
				<span itemprop="reviewRating" itemscope="" itemtype="http://schema.org/Rating" class="review-rating">
					<span itemprop="ratingValue">5</span>
					<span itemprop="worstRating">1</span>
					<span itemprop="bestRating">6</span>
				</span>
				<span itemprop="author" itemscope="" itemtype="http://schema.org/Person">
					<meta itemprop="name" content="">
				</span>
				<svg class="dice" width="60px" height="60px" 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"></path><circle class="pip" cx="25" cy="25" r="10"></circle><circle class="pip" cx="25" cy="75" r="10"></circle><circle class="pip" cx="50" cy="50" r="10"></circle><circle class="pip" cx="75" cy="25" r="10"></circle><circle class="pip" cx="75" cy="75" r="10"></circle></svg>
			</div>
		</div>
		<div class="field">
			<h2 class="review-categories category">Eventyr</h2>
			<span class="review-time">2002</span>
		</div>
		<div class="field">
			<span class="review-label">Regi:</span>
			<h2 class="review-director">Peter Jackson</h2>
		</div>
		<div class="field">
			<span class="review-label">Skuespillere:</span>
			<h2 class="review-actors">Elijah Woods, Viggo Mortensen</h2>
		</div>
		<div class="field">
			<span class="review-label">Premieredato:</span>
			<h2 class="review-releasedate">21.12.2002</h2>
		</div>
		<div class="field">
			<span class="review-label">Aldersgrense:</span>
			<h2 class="review-agerestriction">12+</h2>
		</div>
		<div class="field">
			<span class="review-label">Orginaltittel:</span>
			<h2 class="review-originaltitle"><span>Lord of the Rings: Fellowship of the Ring</span></h2>
		</div>
			<blockquote>« <span>Fly, you fools!</span> »</blockquote>
		<a href="https://www.dagbladet.no/anmeldelser" class="external-link">Se alle anmeldelser</a>
	</div>
</article>

33.1.4 - Concert / classical concert review box

Use this for concert reviews

Konsert

3 1 6
Hvor:

Det kan du lure på

Tilskuere:

Over 9000

« Skikkelig god kok as »
Se alle anmeldelser 
<article itemprop="review" itemscope="" itemtype="http://schema.org/Review" class="review columns large-6 small-12 medium-6">
	<div class="review-box culture-review-box ">
		<div class="review-image">
			<img itemprop="image" title="" alt="" src="//image-www-hakhag2.labdevs.com/100092.jpg?imageId=100092&amp;x=15.697674418605&amp;y=0.87719298245614&amp;cropw=84.302325581395&amp;croph=86.40350877193&amp;width=290&amp;height=198" class="">
		</div>
		<div class="clearfix">
			<div class="titles">
				<h1 itemprop="name" class="name review-name "><span>Konsert</span></h1>
			</div>
			<div class="rating-box">
				<span itemprop="reviewRating" itemscope="" itemtype="http://schema.org/Rating" class="review-rating">
					<span itemprop="ratingValue">3</span>
					<span itemprop="worstRating">1</span>
					<span itemprop="bestRating">6</span>
				</span>
				<span itemprop="author" itemscope="" itemtype="http://schema.org/Person">
					<meta itemprop="name" content="">
				</span>
				<svg class="dice" width="60px" height="60px" 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"></path><circle class="pip" cx="25" cy="75" r="10"></circle><circle class="pip" cx="50" cy="50" r="10"></circle><circle class="pip" cx="75" cy="25" r="10"></circle></svg>
			</div>
		</div>
		<div class="field">
			<span class="review-label">Hvor:</span>
			<h2 class="review-location">Det kan du lure på</h2>
		</div>
		<div class="field">
			<span class="review-label">Tilskuere:</span>
			<h2 class="review-spectators">Over 9000</h2>
		</div>
			<blockquote>« <span>Skikkelig god kok as</span> »</blockquote>
		<a href="https://www.dagbladet.no/anmeldelser" class="external-link">Se alle anmeldelser</a>
	</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.1.6 - Dinside review box

Use this in dinside review articles

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 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/dinside/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/reviews/xc90.jpg" alt="">
           </figure>
           <blockquote>Masse komfort, god plass, stille, fabelaktig girkasse</blockquote>
         </div>
         <div class="review-box__spread">
           <div class="review-box__text">
             <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">
             <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>

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>

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>

33.9 - Review list

List reviews.

.light

light theme

<aside class="review-list {$modifiers} large-6 small-12 medium-12 columns">
   <h5 class="title">Siste musikkanmeldelser</h5>
   <ol class="article-list no-bullet">
       <li>
           <a href="//www.dagbladet.no/kultur/kreativt-overskuddslager-fra-fem-britiske-hissigpropper/69354834">
               <img src="//dbstatic.no/?imageId=69354842&amp;width=350">
               <div class="text-block">
                   <p class="title">Shame</p>
                   <p class="subtitle">Songs of Praise</p>
               </div>
               <img class="dice" src="//www.dagbladet.no/app/showcasr/public/assets/dice/5.svg" alt="">
           </a>
       </li>
       <li>
           <a href="//www.dagbladet.no/kultur/som-regelrette-slag-fra-en-stressende-norsk-underverden/69359841">
               <img src="//dbstatic.no/?imageId=69359939&amp;width=350">
               <div class="text-block">
                   <p class="title">Kenneth Engebretsen</p>
                   <p class="subtitle">Sønn av Kjell</p>
               </div>
               <img class="dice" src="//www.dagbladet.no/app/showcasr/public/assets/dice/4.svg" alt="">
           </a>
       </li>
           <li>
           <a href="//www.dagbladet.no/kultur/ujevn-kaizers-kopi-fra-janove/69348982">
               <img src="//dbstatic.no/?imageId=69349027&amp;width=350">
               <div class="text-block">
                   <p class="title">Janove</p>
                   <p class="subtitle">Hengtmann</p>
               </div>
               <img class="dice" src="//www.dagbladet.no/app/showcasr/public/assets/dice/3.svg" alt="">
           </a>
       </li>
   </ol>
   <a href="//www.dagbladet/anmeldelser" class="review-url">Se alle anmeldelser</a>
</aside>