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
Et leddbånd binder knokler sammen. Kalles også ligament.
<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
<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>
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>