Styleguide 0.1.1

13 - Panel

13.1 - Style

I dag er det 13 år siden prins Sverre Magnus av Norge kom til verden. Kronprinsparets yngste barn er nummer tre i den norske arvefølgen, rett bak sin storesøster, prinsesse Ingrid Alexandra (14), og sin far, kronprins Haakon (45).

.radius

Radius

I dag er det 13 år siden prins Sverre Magnus av Norge kom til verden. Kronprinsparets yngste barn er nummer tre i den norske arvefølgen, rett bak sin storesøster, prinsesse Ingrid Alexandra (14), og sin far, kronprins Haakon (45).

.round

Round

I dag er det 13 år siden prins Sverre Magnus av Norge kom til verden. Kronprinsparets yngste barn er nummer tre i den norske arvefølgen, rett bak sin storesøster, prinsesse Ingrid Alexandra (14), og sin far, kronprins Haakon (45).

<div class="panel {$modifiers} small-6 columns">
  <img src="https://dbstatic.no/70524691.jpg?imageId=70524691&x=0&y=13.741496598639&cropw=100&croph=80.136054421769&width=980&height=590" />
  <div class="copy">
  <p>I dag er det 13 år siden prins Sverre Magnus av Norge kom til verden.
   Kronprinsparets yngste barn er nummer tre i den norske arvefølgen, rett bak sin storesøster,
   prinsesse Ingrid Alexandra (14), og sin far, kronprins Haakon (45).</p>
  </div>
</div>

13.2 - Color

.primary

Red

.yellow

Yellow

.blue

Blue

.purple

Purple

.secondary

Secondary

.black

Black

<aside class="panel infobox {$modifiers} small-6 columns">
   <div class="copy">
       <figure>
           <img class="byline" src="https://randomuser.me/api/portraits/men/46.jpg" />
       </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.4 - 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 {$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 - Article List

<div class="panel small-6 columns has-section-title">
 <h4 class="section-title center {$modifiers}"><span>Dette er saken</span></h4>
 <ol class="article-list no-bullet">
   <li><a href="#">Hoppet som gjør konkurrentene rasende <span class="label-text">(253 kommentarer)</span></a></li>
   <li><a href="#">Da Louis Van Gaal fikk se formen til rekordkjøpet Luke Shaw, ble han forferdet <span class="label-text">(Pluss)</span></a></li>
   <li><a href="#">Elsker nordmennene i «Hercules» <span class="label-text">(video)</span></a></li>
 </ol>
</div>

13.6 - Authorlist

<aside class="panel small-6 columns has-section-title">
   <h5 class="section-title center teal"><span>Se og hørs journalister</span></h5>
   <div class="copy">
       <ul class="author-list">
           <li itemscope itemprop="Person" itemtype="http://schema.org/Person">
               <img itemprop="image" src="https://randomuser.me/api/portraits/men/43.jpg" 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="https://randomuser.me/api/portraits/men/81.jpg" 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="https://randomuser.me/api/portraits/men/46.jpg" 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="https://randomuser.me/api/portraits/women/68.jpg" 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="https://randomuser.me/api/portraits/women/76.jpg" 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="https://randomuser.me/api/portraits/men/36.jpg" 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.7 - Tips oss

Tips oss!

Vi belønner de aller beste tipsene med hele 10.000 kr

Send inn ditt tips
<div class="panel tips small-6 columns has-section-title">
  <h3 class="tips-heading"><span>Tips oss!</span></h3>
  <div class="copy bg-white">
     <div class="tips-icon">
       <img src="/assets/icons/lightbulb.png">
     </div>
    <p>Vi belønner de aller beste tipsene med hele 10.000 kr </p>
   <a class="button primary expand">Send inn ditt tips</a>
  </div>
</div>