Styleguide 0.1.1

20 - Article preview

The article preview is a versatile element used to list articles and their most basic information. The article preview folds into our Grid where small-n, medium-n and large-n sets the width.

:hover

Hover

:active

Active

.nolink

Not clickable

<div class="row">
  <article class="preview small-12 columns" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="3074764762">
    <a itemprop="url" class="{$modifiers}">
      <img itemprop="image" title="" alt="" src="https://dbstatic.no/70502003.jpg?imageId=70502003&width=640&height=384">
      <h1 itemprop="headline" class="headline">Nå svarer han på utroskapsanklagene</h1>
      <p itemprop="description" class="standfirst">Ifølge politiet tappet Kjell Gunnar Larsen SOS Rasisme for beløp i millionklassen.</p>
      <time itemprop="datePublished" class="published" datetime="1995-03-08" title="Publisert 08.03.1995">onsdag 8. mars 1995</time>
      <span class="comments" data-comment-count>111</span>
    </a>
  </article>
</div>

20.1 - Headlines

Headlines can be adjusted independently for each breakpoint using classes small-size-n, medium-size-n and large-size-n. In the same way as our gird sizes, our headline sizes are inherited from small-size-n and up. The headline sizes range from 1 to 150 within each breakpoint. Note that for consistency when inhereting sizes, small-size-n and medium-size-n the font size is set using vw and for large-size-n set using px.

<div class="row">
  <article class="preview small-12 columns" itemscope itemtype="http://schema.org/NewsArticle" role="article">
    <a itemprop="url">
      <h1 itemprop="headline" class="headline small-size-65 medium-size-65 large-size-65"><span class="primary">SISTE:</span> Politiet vil fengsle <br /><span class="small-size-90 medium-size-90 large-size-90">SOS Rasisme-leder</span><br /> <span class="small-size-60 medium-size-60 large-size-55">i fire uker for grovt bedrageri</span></h1>
    </a>
  </article>
</div>

20.2 - Standfirst

20.2.1 - Icons

Icons can prefixed to the standfirst. This can be used e.g. for reviews. Note: This should not be used to mark types of content (see Labels).

<div class="row">
  <article class="preview small-12 columns" itemscope itemtype="http://schema.org/NewsArticle" role="article">
    <a itemprop="url">
      <img itemprop="image" title="" alt="" src="https://dbstatic.no/70502003.jpg?imageId=70502003&width=640&height=384">
      <h1 itemprop="headline" class="headline">Nå svarer han på utroskapsanklagene</h1>
      <p itemprop="description" class="standfirst"><span class="icon-Dice-1">&nbsp;</span>Ifølge politiet tappet Kjell Gunnar Larsen SOS Rasisme for beløp i millionklassen.</p>
      <time itemprop="datePublished" class="published" datetime="1995-03-08" title="Publisert 08.03.1995">onsdag 8. mars 1995</time>
    </a>
  </article>
</div>

20.2.2 - Bullets

The standfirst can also be a bulletlist.

<div class="row">
  <article class="preview small-12 columns" itemscope itemtype="http://schema.org/NewsArticle" role="article">
    <a itemprop="url">
      <img itemprop="image" title="" alt="" src="https://dbstatic.no/70502003.jpg?imageId=70502003&width=640&height=384">
      <h1 itemprop="headline" class="headline">Nå svarer han på utroskapsanklagene</h1>
      <ul class="standfirst">
        <li>Varetektsfengslet i to uker</li>
        <li>57-åringen ble pågrepet mandag morgen</li>
        <li>Brev- og besøkskontroll</li>
      </ul>
      <time itemprop="datePublished" class="published" datetime="1995-03-08" title="Publisert 08.03.1995">onsdag 8. mars 1995</time>
    </a>
  </article>
</div>

20.3 - Video Article preview

Marking for video articles

<div class="row">
 <article class="preview small-12 columns" itemscope itemtype="http://schema.org/NewsArticle" role="article">
   <a itemprop="url">
     <svg version="1.1" id="play-icon" class="play-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 19.9 19.8" xml:space="preserve">
         <path id="Triangle" class="play" d="M16,10.2L4.5,17c-0.3,0.2-0.7,0.1-0.9-0.2c-0.1-0.1-0.1-0.2-0.1-0.3V3.3c0-0.3,0.3-0.6,0.6-0.6
	        c0.1,0,0.2,0,0.3,0.1L16,9.1c0.3,0.2,0.4,0.6,0.2,0.9C16.1,10.1,16.1,10.2,16,10.2z"/>
     </svg>
     <img itemprop="image" title="" alt="" src="https://cdn.jwplayer.com/thumbs/aCbEyYc4-720.jpg">
      <div class="article-preview-text">
        <h1 itemprop="headline" class="headline">Tatt på senga av "Farmen-kjærestens gaveønske</h1>
        <div class="labels">
           <span class="label label-custom">Video</span>
       </div>
     </div>
  </a>
</article>
</div>

20.5 - Editorial markings

20.5.1 - Labels

Lables can be used to mark type of content or as a signpost marking regular columns and article series.

<div class="row">
  <article class="preview small-12 columns" itemscope itemtype="http://schema.org/NewsArticle" role="article">
    <a itemprop="url">
      <img itemprop="image" title="" alt="" src="https://dbstatic.no/70502003.jpg?imageId=70502003&width=640&height=384">
       <div class="article-preview-text">
         <h1 itemprop="headline" class="headline">Nå svarer han på utroskapsanklagene</h1>
         <div class="labels">
            <span class="label label-custom">Siste nytt</span>
        </div>
      </div>
    </a>
  </article>
</div>
<div class="row">
  <article class="preview small-12 columns" itemscope itemtype="http://schema.org/NewsArticle" role="article">
    <a itemprop="url">
      <img itemprop="image" title="" alt="" src="https://dbstatic.no/70502003.jpg?imageId=70502003&width=640&height=384">
       <div class="article-preview-text">
         <h1 itemprop="headline" class="headline">Nå svarer han på utroskapsanklagene</h1>
         <div class="labels">
            <span class="label secondary">kjendis</span>
        </div>
      </div>
    </a>
  </article>
</div>

20.5.2 - Kicker

A kicker can be added to the article preview and as a secondary header.

<div class="row">
  <article class="preview small-12 columns" itemscope itemtype="http://schema.org/NewsArticle" role="article">
    <a itemprop="url">
      <div class="kicker">Super sjokk</div>
      <img itemprop="image" title="" alt="" src="https://dbstatic.no/70502003.jpg?imageId=70502003&width=640&height=384">
      <h2 itemprop="headline" class="headline">Nå svarer han på utroskapsanklagene</h2>
    </a>
  </article>
</div>

20.5.3 - Kicker Deaths

This kicker will only be used when someone famous has passed away

<div class="row">
  <article class="preview small-12 columns" itemscope itemtype="http://schema.org/NewsArticle" role="article">
    <a itemprop="url">
      <div class="kicker kicker-died">Vera Michalsen (1974 - 2018) </div>
         <img itemprop="image" title="" alt="" src="https://dbstatic.no/70378985.jpg?imageId=70378985&x=0&y=21.632653061224&cropw=100&croph=40.068027210884&width=640&height=385">
      <h2 itemprop="headline" class="headline">NRK-profil (43) døde av kreft</h2>
    </a>
  </article>
</div>

20.5.4 - Kicker wedding

This kicker will only be used for big celeb weddings

<div class="row">
  <article class="preview small-12 columns" itemscope itemtype="http://schema.org/NewsArticle" role="article">
    <a itemprop="url">
      <div class="kicker kicker-wedding"><span>Kongelig bryllup i England</span></div>
      <img itemprop="image" title="" alt="" src="https://image-www-mia.labdevs.com/100981.jpg?imageId=100869&x=0&y=11.899313501144&cropw=99.315068493151&croph=70.938215102975&width=580&height=622&compression=70">
      <h2 itemprop="headline" class="headline">Harry og Meghan: Nå er de endelig gift</h2>
    </a>
  </article>
</div>

20.5.5 - Deck

An article can have a secondary title.

<div class="row">
  <article class="preview large-12 medium-12 small-12 columns {$modifiers}" itemscope itemtype="http://schema.org/NewsArticle" role="article">
    <a itemprop="url">
      <img itemprop="image" title="" alt="" src="https://dbstatic.no/70502003.jpg?imageId=70502003&width=640&height=384">
      <h2 class="deck">Beløp i millionklassen:</h2>
      <h1 itemprop="headline" class="headline">Nå svarer han på utroskapsanklagene</h1>
      <p itemprop="description" class="standfirst">Ifølge politiet tappet Kjell Gunnar Larsen SOS Rasisme for beløp i millionklassen.</p>
      <time itemprop="datePublished" class="published" datetime="1995-03-08" title="Publisert 08.03.1995">onsdag 8. mars 1995</time>
    </a>
  </article>
</div>

20.5.6 - Bylinephoto

An article can have a bylinephoto depicting the author of the article.

<div class="row">
  <article class="preview small-12 columns {$modifiers}" itemscope itemtype="http://schema.org/NewsArticle" role="article">
    <a itemprop="url">
      <img itemprop="image" title="" alt="" src="https://dbstatic.no/70502003.jpg?imageId=70502003&width=640&height=384">
      <img class="byline z-shadow-1" src="http://www.dagbladet.no/meninger/assets/images/bylines/msi.png">
      <h2 class="deck">Marie Simonsen</h2>
      <h1 itemprop="headline" class="headline">Nå svarer han på utroskapsanklagene</h1>
      <p itemprop="description" class="standfirst">Ifølge politiet tappet Kjell Gunnar Larsen SOS Rasisme for beløp i millionklassen.</p>
      <time itemprop="datePublished" class="published" datetime="1995-03-08" title="Publisert 08.03.1995">onsdag 8. mars 1995</time>
    </a>
  </article>
</div>

20.6 - Related

Related articles can be appended as list below the article preview.

<div class="row">
  <article class="preview small-12 columns" itemscope itemtype="http://schema.org/NewsArticle" role="article">
    <a itemprop="url">
      <img itemprop="image" title="" alt="" src="https://dbstatic.no/70502003.jpg?imageId=70502003&width=640&height=384">
      <h1 itemprop="headline" class="headline">Nå svarer han på utroskapsanklagene</h1>
      <p itemprop="description" class="standfirst">Ifølge politiet tappet Kjell Gunnar Larsen SOS Rasisme for beløp i millionklassen.</p>
      <time itemprop="datePublished" class="published" datetime="1995-03-08" title="Publisert 08.03.1995">onsdag 8. mars 1995</time>
    </a>
    <aside class="related">
      <h1><span>Mer om saken</span></h1>
      <ul>
        <li><a>- Vi fant mer penger enn hva det er normalt å ha hjemme</a></li>
        <li><a>- Kjell Gunnar Larsen og SOS Rasisme er uskyldige</a></li>
      </ul>
    </aside>
  </article>
</div>

20.6.1 - Icons

Related links can be marked up with a icon indication the type of content.

<div class="row">
  <article class="preview small-12 columns" itemscope itemtype="http://schema.org/NewsArticle" role="article">
    <a itemprop="url">
      <img itemprop="image" title="" alt="" src="https://dbstatic.no/70502003.jpg?imageId=70502003&width=640&height=384">
      <h1 itemprop="headline" class="headline">Nå svarer han på utroskapsanklagene</h1>
      <p itemprop="description" class="standfirst">Ifølge politiet tappet Kjell Gunnar Larsen SOS Rasisme for beløp i millionklassen.</p>
      <time itemprop="datePublished" class="published" datetime="1995-03-08" title="Publisert 08.03.1995">onsdag 8. mars 1995</time>
    </a>
    <aside class="related">
      <h1><span>Mer om saken</span></h1>
      <ul class="no-bullets">
        <li><span class="icon-Pictures-alt-2"></span><a>- Vi fant mer penger enn hva det er normalt å ha hjemme</a></li>
        <li><span class="icon-Play"></span><a>- Kjell Gunnar Larsen og SOS Rasisme er uskyldige</a></li>
      </ul>
    </aside>
  </article>
</div>

20.7 - Secondary actions

A button or group of buttons can be appended encouraging a secondary behavior.

<div class="row">
  <article class="preview small-12 medium-6 large-6 {$modifiers} columns" itemscope itemtype="http://schema.org/NewsArticle" role="article">
    <a itemprop="url">
      <img itemprop="image" title="" alt="" src="https://dbstatic.no/70502003.jpg?imageId=70502003&width=640&height=384">
      <h1 itemprop="headline" class="headline">Nå svarer han på utroskapsanklagene</h1>
      <p itemprop="description" class="standfirst">Ifølge politiet tappet Kjell Gunnar Larsen SOS Rasisme for beløp i millionklassen.</p>
      <time itemprop="datePublished" class="published" datetime="1995-03-08" title="Publisert 08.03.1995">onsdag 8. mars 1995</time>
    </a>
    <div class="actions">
      <a href="#" class="button radius expand primary tip">Tips oss <span class="tel">2400</span></a>
    </div>
  </article>
  <article class="preview small-12 medium-6 large-6 {$modifiers} columns" itemscope itemtype="http://schema.org/NewsArticle" role="article">
    <a itemprop="url">
      <img itemprop="image" title="" alt="" src="https://dbstatic.no/70502003.jpg?imageId=70502003&width=640&height=384">
      <h1 itemprop="headline" class="headline">Nå svarer han på utroskapsanklagene</h1>
      <p itemprop="description" class="standfirst">Ifølge politiet tappet Kjell Gunnar Larsen SOS Rasisme for beløp i millionklassen.</p>
      <time itemprop="datePublished" class="published" datetime="1995-03-08" title="Publisert 08.03.1995">onsdag 8. mars 1995</time>
    </a>
    <div class="actions">
      <ul class="button-group even-2">
        <li><a href="#" class="button secondary"><span class="icon-Target align-left">&nbsp;</span>Livestudio</a></li>
        <li><a href="#" class="button secondary"><span class="icon-Checkbox-dotted-active align-left">&nbsp;</span>Sjekk deg selv</a></li>
      </ul>
    </div>
  </article>
</div>

20.8 - Background colors

The article preview can be framed with a background color. NOTE: We need more information here about when the different color sould be used.

.primary

Red

.yellow

Yellow

.blue

Blue

.purple

Purple

.secondary

Secondary

.black

Black

<div class="row">
  <article class="preview {$modifiers} small-12 columns" itemscope itemtype="http://schema.org/NewsArticle" role="article">
    <a itemprop="url">
      <img itemprop="image" title="" alt="" src="https://dbstatic.no/70502003.jpg?imageId=70502003&width=640&height=384">
      <h1 itemprop="headline" class="headline">Nå svarer han på utroskapsanklagene</h1>
      <p itemprop="description" class="standfirst"><span class="icon-Lab">&nbsp;</span>Ifølge politiet tappet Kjell Gunnar Larsen SOS Rasisme for beløp i millionklassen.</p>
      <span class="label">VIDEO</span><time itemprop="datePublished" class="published" datetime="1995-03-08" title="Publisert 08.03.1995">onsdag 8. mars 1995</time>
    </a>
  </article>
</div>

20.9 - Text only

The image can be omitted if none is available.

.primary

Red

.black

Black

.secondary

Secondary

<div class="row">
  <article class="preview {$modifiers} small-12 columns" itemscope itemtype="http://schema.org/NewsArticle" role="article">
    <a itemprop="url">
      <h1 itemprop="headline" class="headline">Nå svarer han på utroskapsanklagene</h1>
      <p itemprop="description" class="standfirst">Ifølge politiet tappet Kjell Gunnar Larsen SOS Rasisme for beløp i millionklassen.</p>
      <time itemprop="datePublished" class="published" datetime="1995-03-08" title="Publisert 08.03.1995">onsdag 8. mars 1995</time>
    </a>
  </article>
</div>

20.10 - Float images

Images can be floated left or right but must be accompanied by a widt with % units.

.left

Left

.right

Right

<div class="row">
  <article class="preview small-12 columns" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="3074764762">
    <a itemprop="url">
      <figure class="{$modifiers}" style="width:50%; padding-bottom: 28.58%;">
        <img itemprop="image" title="" alt="" src="https://dbstatic.no/70502003.jpg?imageId=70502003&width=640&height=384">
      </figure>
      <h1 itemprop="headline" class="headline">Nå svarer han på utroskapsanklagene</h1>
      <p itemprop="description" class="standfirst">Ifølge politiet tappet Kjell Gunnar Larsen SOS Rasisme for beløp i millionklassen.</p>
      <time itemprop="datePublished" class="published" datetime="1995-03-08" title="Publisert 08.03.1995">onsdag 8. mars 1995</time>
      <span class="comments" data-comment-count>111</span>
    </a>
  </article>
</div>

20.11 - Extrinsic content

When displaying content that links to articles from other sites the kicker must read Eksternt innhold. Additionally a label should state the site of the original sender.

<div class="row">
  <article id="article_70659125" class="preview  columns small-12 medium-6 extrinsic" itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem" role="article" data-id="70663481" data-label="kk">
    <a itemprop="url" href="//www.kk.no/showbiz/hertuginne-meghan-med-nydelig-gest-til-sin-avdode-svigermor-prinsesse-diana/70659125">
           <figure class=" " style="padding-bottom:50%;">
                 <img class=" lazyload" itemprop="image" alt="Hertuginne Meghan med nydelig gest til sin avdøde svigermor prinsesse Diana" data-srcset="//dbstatic.no/70659131.jpg?imageId=70659131&amp;x=0&amp;y=0&amp;cropw=100&amp;croph=54.14364640884&amp;width=321&amp;height=161&amp;compression=80 640w, //dbstatic.no/70659131.jpg?imageId=70659131&amp;x=0&amp;y=0&amp;cropw=100&amp;croph=54.14364640884&amp;width=512&amp;height=256&amp;compression=80 1024w, //dbstatic.no/70659131.jpg?imageId=70659131&amp;x=0&amp;y=0&amp;cropw=100&amp;croph=54.14364640884&amp;width=640&amp;height=320&amp;compression=70 320w" src="//dbstatic.no/70659131.jpg?imageId=70659131&amp;x=0&amp;y=0&amp;cropw=100&amp;croph=54.14364640884&amp;width=640&amp;height=320&amp;compression=70">
            </figure>
            <div class="article-preview-text">
               <h1 class="headline large-size-8 small-size-4">
                   Hertuginne Meghan med nydelig gest til sin avdøde svigermor prinsesse Diana
               </h1>
               <div class="labels">
                   <span class="label pink">kk</span>
               </div>
           </div>
     </a>
 </article>
</div>

20.12 - Native advertising

When displaying native advertisements the kicker and label must read Annonsørinnhold. Following the label the text must state the advertisers name. The advertisements color is specifically chosen not to be too close to the colors used by editorial content.

<div class="row">
  <article  class="preview native-advertisement small-12 medium-6 columns" itemscope itemtype="http://schema.org/WPAdBlock" role="article" data-id="3074764762">
    <a itemprop="url" rel="nofollow">
     <div class="kicker">fra fjordland</div>
      <img itemprop="image" title="" alt="" src="https://dbstatic.no/70663622.jpg?imageId=70663622&width=342&height=171&compression=80">
      <h1 itemprop="headline" class="headline">I kveld kan du vinne utrolige 65 millioner kroner</h1>
      <p itemprop="description" class="standfirst">Oppskriften finner du her. </p>
    </a>
  </article>
</div>

20.15 - Article preview blog

.secondary - Secondary

<div class="row">
    <article class="preview {$modifiers} blog small-12 medium-12 columns" itemscope itemtype="http://schema.org/BlogPosting" role="article">
        <a itemprop="url" style="background-image: url('http://gfx.dagbladet.no/labrador/429/429014/42901400/jpg/active/0.jpg')">
            <h2 class="deck">Marie Simonsen:</h2>
            <h1 itemprop="headline" class="headline">Litt spesielt</h1>
            <p itemprop="description" class="standfirst">Ifølge politiet tappet Kjell Gunnar Larsen SOS Rasisme for beløp i millionklassen.</p>
            <span class="label white">BLOGGINNLEGG</span><time itemprop="datePublished" class="published" datetime="1995-03-08" title="Publisert 08.03.1995">onsdag 8. mars 1995</time>
        </a>
    </article>
</div>

20.16 - Article preview horizontal

An article preview which is set horizontal to be listed after eachother.

<div class="row">
     <article class="preview horizontal small-12 columns" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="3074764762">
         <a itemprop="url">
             <figure>
                 <img itemprop="image" title="" alt="" src="https://dbstatic.no/70502003.jpg?imageId=70502003&width=640&height=384">
             </figure>
             <h1 itemprop="headline" class="headline">Nå svarer han på utroskapsanklagene</h1>
             <p itemprop="description" class="standfirst">Ifølge politiet tappet Kjell Gunnar Larsen SOS Rasisme for beløp i millionklassen.</p>
         </a>
     </article>
     <article class="preview horizontal small-12 columns" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="3074764762">
         <a itemprop="url">
             <figure>
                 <img itemprop="image" title="" alt="" src="https://dbstatic.no/70502003.jpg?imageId=70502003&width=640&height=384">
             </figure>
             <h1 itemprop="headline" class="headline">Nå svarer han på utroskapsanklagene</h1>
             <p itemprop="description" class="standfirst">Ifølge politiet tappet Kjell Gunnar Larsen SOS Rasisme for beløp i millionklassen.</p>
         </a>
     </article>
     <article class="preview horizontal small-12 columns" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="3074764762">
         <a itemprop="url">
             <figure>
                 <img itemprop="image" title="" alt="" src="https://dbstatic.no/70502003.jpg?imageId=70502003&width=640&height=384">
             </figure>
             <h1 itemprop="headline" class="headline">Nå svarer han på utroskapsanklagene</h1>
         </a>
     </article>
</div>

20.17 - Text overlay

Overlay the title on top of the image.

.text-overlay-yellow

Yellow

.text-overlay-primary

Primary

.text-overlay-black

Black

<div class="row">
  <article class="preview small-12 columns text-overlay {$modifiers}" itemscope itemtype="http://schema.org/NewsArticle" role="article">
    <a itemprop="url">
      <div class="kicker prio">Super sjokk</div>
      <img class="image-overlay" itemprop="image" title="" alt="" src="https://dbstatic.no/70502003.jpg?imageId=70502003&width=640&height=384">
      <h2 itemprop="headline" class="headline uppercase">- Vi venter oss roser hver fredag</h2>
    </a>
  </article>
</div>

20.18 - Kitchen sink

Putting it all together.

.primary

Red

.black

Black

.secondary

Secondary

<div class="row">
  <article class="preview {$modifiers} small-12 columns" itemscope itemtype="http://schema.org/NewsArticle" role="article">
    <a itemprop="url">
      <div class="kicker">Dagbladet avslører:</div>
      <img itemprop="image" title="" alt="" src="https://dbstatic.no/70502003.jpg?imageId=70502003&width=640&height=384">
      <h1 itemprop="headline" class="headline">Nå svarer han på utroskapsanklagene</h1>
      <p itemprop="description" class="standfirst">Ifølge politiet tappet Kjell Gunnar Larsen SOS Rasisme for beløp i millionklassen.</p>
      <time itemprop="datePublished" class="published" datetime="1995-03-08" title="Publisert 08.03.1995">onsdag 8. mars 1995</time>
    </a>
    <aside class="related">
      <h1><span>Mer om saken</span></h1>
      <ul class="no-bullets">
        <li><span class="icon-Pictures-alt-2"></span><a href="http://www.seher.no/2014/04/28/nyheter/innenriks/sos_rasisme/33015560/">- Vi fant mer penger enn hva det er normalt å ha hjemme</a></li>
        <li><span class="icon-Play"></span><a href="http://www.seher.no/2014/04/29/nyheter/innenriks/sos_rasisme/tjen_folket/33033722/">- Kjell Gunnar Larsen og SOS Rasisme er uskyldige</a></li>
      </ul>
    </aside>
    <div class="actions">
      <a href="#" class="button radius expand primary tip">Tips oss <span class="tel">2400</span></a>
    </div>
  </article>
</div>