13.1 - Style
 I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
.radius Radius
 I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
.round Round
 I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
<div class="panel {$modifiers} small-6 columns">
  <img src="http://gfx.dagbladet.no/labrador/330/330118/33011819/jpg/active/480x.jpg" />
  <div class="copy">
    <p>I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.</p>
  </div>
</div> 13.2 - Color
 Headline
I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
.primary Red
 Headline
I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
.orange Orange
 Headline
I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
.yellow Yellow
 Headline
I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
.green Green
 Headline
I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
.blue Blue
 Headline
I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
.purple Purple
 Headline
I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
.burgundy Burgundy
 Headline
I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
.pink Pink
 Headline
I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
.secondary Secondary
 Headline
I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
.black Black
 Headline
I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
.teal Teal
 Headline
I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
<div class="panel {$modifiers} z-shadow-1 small-6 columns">
  <img src="http://gfx.dagbladet.no/labrador/330/330118/33011819/jpg/active/480x.jpg" />
  <div class="copy">
    <h5>Headline</h5>
    <p>I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.</p>
  </div>
</div> 13.3 - Divider
 Dette er saken
I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
 I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
Dette er saken
.primary Primary/Red
 Dette er saken
I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
 I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
Dette er saken
.orange Orange
 Dette er saken
I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
 I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
Dette er saken
.yellow Yellow
 Dette er saken
I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
 I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
Dette er saken
.green Green
 Dette er saken
I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
 I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
Dette er saken
.blue Blue
 Dette er saken
I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
 I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
Dette er saken
.purple Purple
 Dette er saken
I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
 I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
Dette er saken
.burgundy Burgundy
 Dette er saken
I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
 I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
Dette er saken
.pink Pink
 Dette er saken
I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
 I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
Dette er saken
<div class="row">
  <div class="small-6 columns">
    <div class="panel {$modifiers} z-shadow-1">
      <img src="http://gfx.dagbladet.no/labrador/330/330118/33011819/jpg/active/480x.jpg" />
      <div class="divider dark"><h6>Dette er saken</h6></div>
      <div class="copy">
        <p>I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.</p>
      </div>
    </div>
  </div>
  <div class="small-6 columns">
    <div class="panel {$modifiers} z-shadow-1">
      <img src="http://gfx.dagbladet.no/labrador/330/330118/33011819/jpg/active/480x.jpg" />
      <div class="copy">
        <p>I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.</p>
      </div>
      <div class="divider light"><h6>Dette er saken</h6></div>
    </div>
  </div>
</div> 13.4 - Section title
Dette er saken
I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
.primary Primary/Red
Dette er saken
I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
.orange Orange
Dette er saken
I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
.yellow Yellow
Dette er saken
I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
.green Green
Dette er saken
I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
.blue Blue
Dette er saken
I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
.purple Purple
Dette er saken
I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
.burgundy Burgundy
Dette er saken
I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
.pink Pink
Dette er saken
I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
<div class="panel small-6 columns has-section-title">
  <h4 class="section-title center {$modifiers}"><span>Dette er saken</span></h4>
  <div class="copy">
    <p>I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.</p>
  </div>
</div> 13.5 - Fact box
Dette er saken
 I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.
 <div class="panel small-6 columns has-section-title">
     <h4 class="section-title center  primary"><span>Dette er saken</span></h4>
     <div class="copy">
         <figure>
             <img src="http://gfx.dagbladet.no/labrador/330/330118/33011819/jpg/active/480x.jpg">
         </figure>
         <p>I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.</p>
     </div>
 </div> 13.6 - Infobox
Info about the author of an article.
.secondary Secondary
.teal Teal
.primary Primary/Red
.orange Orange
.yellow Yellow
.green Green
.blue Blue
.purple Purple
.burgundy Burgundy
.pink Pink
 <aside class="panel infobox {$modifiers} small-6 columns">
     <div class="copy">
         <figure>
             <img class="byline" src="http://www.dagbladet.no/meninger/assets/images/bylines/msi.png" />
         </figure>
         <h5>Innsendt av Mikael Scott Bjerkeli</h5>
         <p>Styreleder - på vegne av og i samarbeid med Harry Benjamin ressurssenter, HBRSU- barne- og ungdomsforeningen, og HBRS foreldre- og familieforeningen.</p>
     </div>
 </aside> 13.7 - Authorlist
<aside class="panel small-6 columns has-section-title">
    <h5 class="section-title center teal"><span>Dagbladets ledere</span></h5>
    <div class="copy">
        <ul class="author-list">
            <li itemscope itemprop="Person" itemtype="http://schema.org/Person">
                <img itemprop="image" src="//styleguide.dagbladet.no/assets/bylines/jam.png" alt="John Arne Markussen">
                <div itemprop="name">John Arne Markussen</div>
                <div itemprop="jobTitle">Ansvarlig Redaktør</div>
                <a itemprop="email" href="mailto:jam@dagbladet.no">jam@dagbladet.no</a>
            </li>
            <li itemscope itemprop="Person" itemtype="http://schema.org/Person">
                <img itemprop="image" src="//styleguide.dagbladet.no/assets/bylines/fha.png" alt="Frode Hansen">
                <div itemprop="name">Frode Hansen</div>
                <div itemprop="jobTitle">Nyhetsredaktør</div>
                <a itemprop="email" href="mailto:fha@dagbladet.no">fha@dagbladet.no</a>
            </li>
            <li itemscope itemprop="Person" itemtype="http://schema.org/Person">
                <img itemprop="image" src="//styleguide.dagbladet.no/assets/bylines/ger.png" alt="Geir Ramnefjell">
                <div itemprop="name">Geir Ramnefjell</div>
                <div itemprop="jobTitle">Politisk redaktør</div>
                <a itemprop="email" href="mailto:ger@dagbladet.no">ger@dagbladet.no</a>
            </li>
            <li itemscope itemprop="Person" itemtype="http://schema.org/Person">
                <img itemprop="image" src="//styleguide.dagbladet.no/assets/bylines/shv.png" alt="Sigrid Hvidsten">
                <div itemprop="name">Sigrid Hvidsten</div>
                <div itemprop="jobTitle">Kulturredaktør</div>
                <a itemprop="email" href="mailto:shv@dagbladet.no">shv@dagbladet.no</a>
            </li>
            <li itemscope itemprop="Person" itemtype="http://schema.org/Person">
                <img itemprop="image" src="//styleguide.dagbladet.no/assets/bylines/kos.png" alt="Karine Østtveit">
                <div itemprop="name">Karine Østtveit</div>
                <div itemprop="jobTitle">Magasinredaktør</div>
                <a itemprop="email" href="mailto:kos@dagbladet.no">kos@dagbladet.no</a>
            </li>
            <li itemscope itemprop="Person" itemtype="http://schema.org/Person">
                <img itemprop="image" src="//styleguide.dagbladet.no/assets/bylines/joe.png" alt="John Olav Egeland">
                <div itemprop="name">John Olav Egeland</div>
                <div itemprop="jobTitle">Redaktør</div>
                <a itemprop="email" href="mailto:joe@dagbladet.no">joe@dagbladet.no</a>
            </li>
        </ul>
     </div>
 </aside> 13.9 - Fact box
A small variation in styling used for special and magasinet
Om Pia Tjelta
-  Født 
- 2. februar 1980
 -  Familie 
-Gift med Martin Jøndahl. To barn: Jenny (3) og Jens (straks 7 uker gammel)
 -  Beste egenskap 
- At jeg har evnen til å gi faen.
 -  Verste egenskap 
- Eksplosivt illsint.
 
<main role="main" class="long-read article magasinet">
 <div class="panel special-panel small-12 medium-6 columns has-section-title ">
    <h4 class="section-title center "><span>Om Pia Tjelta</span></h4>
    <div class="copy">
       <ul>
           <li>
               <b>Født</b>
               <p>- 2. februar 1980 </p>
           </li>
           <li>
               <b>Familie</b>
               <p> -Gift med Martin Jøndahl. To barn: Jenny (3) og Jens (straks 7 uker gammel)</p>
           </li>
           <li>
               <b>Beste egenskap</b>
               <p>- At jeg har evnen til å gi faen.</p>
           </li>
           <li>
               <b>Verste egenskap</b>
               <p>- Eksplosivt illsint.</p>
           </li>
       </ul>
     </div>
 </div>
</main> 13.10 - Fact box - expand
Fact box with expand button
<main role="main" class="long-read magasinet article">
 <div class="panel special-panel small-12 medium-6 columns has-section-title has-expand" data-expand>
 <h4 class="section-title center"><span>Om Pia Tjelta</span></h4>
    <div class="copy">
       <ul class="expandable">
           <li>
               <b>Født</b>
               <p>- 2. februar 1980 </p>
           </li>
           <li>
               <b>Familie</b>
               <p> -Gift med Martin Jøndahl. To barn: Jenny (3) og Jens (straks 7 uker gammel)</p>
           </li>
           <li>
               <b>Beste egenskap</b>
               <p>- At jeg har evnen til å gi faen.</p>
           </li>
           <li>
               <b>Verste egenskap</b>
               <p>- Eksplosivt illsint.</p>
           </li>
           <li>
               <b>Verste egenskap</b>
               <p>- Eksplosivt illsint.</p>
           </li>
       </ul>
     </div>
     <div class="expand-overlay">
       <a href="#" class="toggle"> Vis resten</a>
     </div>
 </div>
</main> 13.11 - Biobox
Extended bio about an author, with list of his/hers latest published articles along with his/hers most featured tag(s).
 Heidi har en bachelor i kultur -og samfunnsvitenskap og en mastergrad i pedagogikk fra Universitetet i Oslo.
Interesseområder
- Nyheter
 - Innenriks
 - SOS Rasisme
 
Siste publiserte innlegg
- Hoppet som gjør konkurrentene rasende
 - Da Louis Van Gaal fikk se formen til rekordkjøpet Luke Shaw, ble han forferdet
 - Elsker nordmennene i «Hercules»
 
  <div class="panel bio large-6 small-12 medium-6 columns">
    <div class="image-wrapper">
      <figure>
        <img src="http://www.dagbladet.no/img/spaltist.png">
      </figure>
      <div class="author-info text-center">
        <span class="label white">Spaltist</span>
        <h1 class="headline" itemprop="headline">Heidi Helene Sveen</h1>
      </div>
    </div>
    <div class="copy">
      <p class="bio-text">Heidi har en bachelor i kultur -og samfunnsvitenskap og en mastergrad i pedagogikk fra Universitetet i Oslo.</p>
      <h2>Interesseområder</h2>
      <ul class="labels">
        <li class="label secondary">Nyheter</li>
        <li class="label secondary">Innenriks</li>
        <li class="label secondary">SOS Rasisme</li>
      </ul>
      <h2>Siste publiserte innlegg</h2>
      <ul class="article-list no-bullet">
        <li><a href="#">Hoppet som gjør konkurrentene rasende <time itemprop="datePublished" class="published" datetime="1995-03-08" title="Publisert 08.03.1995">onsdag 8. mars 1995</time></a></li>
        <li><a href="#">Da Louis Van Gaal fikk se formen til rekordkjøpet Luke Shaw, ble han forferdet <time itemprop="datePublished" class="published" datetime="1995-03-08" title="Publisert 08.03.1995">onsdag 8. mars 1995</time></a></li>
        <li><a href="#">Elsker nordmennene i «Hercules» <time itemprop="datePublished" class="published" datetime="1995-03-08" title="Publisert 08.03.1995">onsdag 8. mars 1995</time></a></li>
      </ul>
      <a class="read-more" href="#">Se alle innlegg</a>
    </div>
  </div>