styleguide 0.30.11

13 - Panel

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.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

.primary

Primary/Red

 <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 - Legeliste

<aside class="panel special-panel small-12 medium-6 columns has-section-title ">
    <h5 class="section-title center"><span>Våre leger og eksperter</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">Kirurg</div>
                <a itemprop="email" href="mailto:jam@dagbladet.no">Les mer</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">Les mer</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">Les mer</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">Les mer</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">Les mer</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">Les mer</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.9.14 - Fact box - old Lommelegen articles

A small variation in styling used for special and magasinet

Leddbånd og sener
Vet du forskjellen?
Et leddbånd binder knokler sammen. Kalles også ligament.
En sene binder en muskel til en knokkel. Kalles også tendo.
	<div class="ll-factbox small-12 medium-6 columns">
		<div class="title">Leddbånd og sener</div>
		<div class="body">
			Vet du forskjellen?<br/>
			<strong>Et leddbånd</strong> binder knokler sammen. Kalles også <em>ligament</em>.
		</div>
		<div class="body">
			<strong>En sene</strong> binder en muskel til en knokkel. Kalles også <em>tendo</em>.
		</div>
</div>

13.10 - Fact box - expand

Fact box with expand button

Om Pia Tjelta

<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).

Spaltist

Heidi Helene Sveen

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

Se alle innlegg
  <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>

13.12 - Legeliste

<aside class="panel special-panel small-12 medium-6 columns has-section-title ">
    <h5 class="section-title center"><span>Våre leger og eksperter</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">
                <a rel="author" itemprop="url name" href="#">Tom-Marius Olsen</a>
                <div itemprop="jobTitle">Kirurg</div>
            </li>
            <li itemscope itemprop="Person" itemtype="http://schema.org/Person">
                <img itemprop="image" src="//styleguide.dagbladet.no/assets/bylines/fha.png" alt="Frode Hansen">
                <a rel="author" itemprop="url name" href="#">Tom-Marius Olsen</a>
                <div itemprop="jobTitle">Kirurg</div>
            </li>
            <li itemscope itemprop="Person" itemtype="http://schema.org/Person">
                <img itemprop="image" src="//styleguide.dagbladet.no/assets/bylines/ger.png" alt="Geir Ramnefjell">
               <a rel="author" itemprop="url name" href="#">Tom-Marius Olsen</a>
                <div itemprop="jobTitle">Kirurg</div>
            </li>
            <li itemscope itemprop="Person" itemtype="http://schema.org/Person">
                <img itemprop="image" src="//styleguide.dagbladet.no/assets/bylines/shv.png" alt="Sigrid Hvidsten">
                <a rel="author" itemprop="url name" href="#">Tom-Marius Olsen</a>
                <div itemprop="jobTitle">Kirurg</div>
            </li>
            <li itemscope itemprop="Person" itemtype="http://schema.org/Person">
                <img itemprop="image" src="//styleguide.dagbladet.no/assets/bylines/kos.png" alt="Karine Østtveit">
                <a rel="author" itemprop="url name" href="#">Tom-Marius Olsen</a>
                <div itemprop="jobTitle">Kirurg</div>
            </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">
                <a rel="author" itemprop="url name" href="#">Tom-Marius Olsen</a>
                <div itemprop="jobTitle">Kirurg</div>
            </li>
        </ul>
       <a class="button {$modifiers}">Se fler</a>
     </div>
 </aside>

13.13 -

<aside class="panel special-panel small-12 medium-6 columns has-section-title ">
   <h3 class="section-title center"><span>Siste spørsmål og svar </span></h3>
    <div class="copy">
      <ol class="article-list no-bullet">
        <li>
          <a href="#"><h4>Blod og Sæd i urin </h4>
            <p itemprop="description" class="standfirst">Hei! Fikk voldsomme hosteanfall i mai, spesielt på morgenen, ikke hver dag. Anfallene startet med tørrhoste, og varte i noen minutter. Ble veldi</p>
          </a>
          <a>les Mer<img src="../assets/icon/arrow.svg"></a>
       </li>
        <li>
          <a href="#"><h4>Mulig brudd i ryggen</h4>
            <p itemprop="description" class="standfirst">Hei! Fikk voldsomme hosteanfall i mai, spesielt på morgenen, ikke hver dag. Anfallene startet med tørrhoste, og varte i noen minutter. Ble veldi</p>
          </a>
          <a>les Mer<img src="../assets/icon/arrow.svg"></a>
         </li>
        <li>
          <a href="#"><h4>Tannkjøttlomme med betennelse et ekkelt sted på en enkelt tann</h4>
           <p itemprop="description" class="standfirst">Hei! Fikk voldsomme hosteanfall i mai, spesielt på morgenen, ikke hver dag. Anfallene startet med tørrhoste, og varte i noen minutter. Ble veldi</p>
          </a>
          <a>les Mer<img src="../assets/icon/arrow.svg"></a>
        </li>
        <li>
          <a href="#"><h4>Var det borelia, den røde ringen?</h4>
            <p itemprop="description" class="standfirst">Hei! Fikk voldsomme hosteanfall i mai, spesielt på morgenen, ikke hver dag. Anfallene startet med tørrhoste, og varte i noen minutter. Ble veldig stor og farlig</p>
          </a>
          <a>les Mer<img src="../assets/icon/arrow.svg"></a>
        </li>
      </ol>
      <a class="button {$modifiers}">Se fler</a>
   </div>
</aside>