Styleguide 0.30.7

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="/assets/test/978x.jpg">
      <h1 itemprop="headline" class="headline">Politiet vil fengsle SOS Rasisme-leder i fire uker</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="/assets/test/978x.jpg">
      <h1 itemprop="headline" class="headline">Politiet vil fengsle SOS Rasisme-leder i fire uker</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="/assets/test/978x.jpg">
      <h1 itemprop="headline" class="headline">Politiet vil fengsle SOS Rasisme-leder i fire uker</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.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="/assets/test/978x.jpg">
      <h1 itemprop="headline" class="headline">Politiet vil fengsle SOS Rasisme-leder i fire uker</h1>
      <p itemprop="description" class="standfirst">Ifølge politiet tappet Kjell Gunnar Larsen SOS Rasisme for beløp i millionklassen.</p>
      <span class="label">VIDEO</span><span class="label purple">TEMA</span><time itemprop="datePublished" class="published" datetime="1995-03-08" title="Publisert 08.03.1995">onsdag 8. mars 1995</time>
    </a>
  </article>
</div>

20.5.2 - Kicker

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

.opinion

Opinion

<div class="row">
  <article class="preview small-12 columns {$modifiers}" itemscope itemtype="http://schema.org/NewsArticle" role="article">
    <a itemprop="url">
      <div class="kicker">Dagbladet avslører:</div>
      <img itemprop="image" title="" alt="" src="/assets/test/978x.jpg">
      <h1 itemprop="headline" class="headline">Politiet vil fengsle SOS Rasisme-leder i fire uker</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.3 - 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="/assets/test/978x.jpg">
      <h2 class="deck">Beløp i millionklassen:</h2>
      <h1 itemprop="headline" class="headline">Politiet vil fengsle SOS Rasisme-leder i fire uker</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.4 - 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="/assets/test/978x.jpg">
      <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">Politiet vil fengsle SOS Rasisme-leder i fire uker</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="/assets/test/978x.jpg">
      <h1 itemprop="headline" class="headline">Politiet vil fengsle SOS Rasisme-leder i fire uker</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="/assets/test/978x.jpg">
      <h1 itemprop="headline" class="headline">Politiet vil fengsle SOS Rasisme-leder i fire uker</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="/assets/test/978x.jpg">
      <h1 itemprop="headline" class="headline">Politiet vil fengsle SOS Rasisme-leder i fire uker</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="/assets/test/978x.jpg">
      <h1 itemprop="headline" class="headline">Politiet vil fengsle SOS Rasisme-leder i fire uker</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

.orange

Orange

.yellow

Yellow

.green

Green

.blue

Blue

.purple

Purple

.burgundy

Burgundy

.pink

Pink

.secondary

Secondary

.black

Black

.teal

Teal

<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="/assets/test/978x.jpg">
      <h1 itemprop="headline" class="headline">Politiet vil fengsle SOS Rasisme-leder i fire uker</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">Politiet vil fengsle SOS Rasisme-leder i fire uker</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="/assets/test/978x.jpg">
      </figure>
      <h1 itemprop="headline" class="headline">Politiet vil fengsle SOS Rasisme-leder i fire uker</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 class="preview small-6 extrinsic columns" itemscope itemtype="http://schema.org/WPAdBlock" role="article" data-id="3074764762">
    <a itemprop="url" rel="nofollow">
      <div class="kicker">Eksternt innhold</div>
      <img itemprop="image" title="" alt="" src="/assets/test/extrinsic-1.jpg">
      <h1 itemprop="headline" class="headline">Hva har skjedd med Jessica Simpson?</h1>
      <p itemprop="description" class="standfirst">Viste fram blåmerke på Instagram.</p>
      <span class="label" itemprop="publisher">Se&Hør</span> <time itemprop="datePublished" class="published" datetime="1995-03-08" title="Publisert 08.03.1995">onsdag 8. mars 1995</time>
    </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">
      <img itemprop="image" title="" alt="" src="/assets/test/native-advertisement.jpg">
      <h1 itemprop="headline" class="headline">Dette er Norges beste kake</h1>
      <p itemprop="description" class="standfirst">Oppskriften finner du her. </p>
      <span class="label-text">fra <span itemprop="publisher">Fjordland</span>
    </a>
  </article>
</div>

20.15 - Article preview blog

Article preview blog

.teal

Teal

.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="/assets/test/978x.jpg">
             </figure>
             <h1 itemprop="headline" class="headline">Politiet vil fengsle SOS Rasisme-leder i fire uker</h1>
             <p itemprop="description" class="standfirst">Ifølge politiet tappet Kjell Gunnar Larsen SOS Rasisme for beløp i millionklassen.</p>
             <time class="published" itemprop="datePublished" datetime="2014-04-23" title="Publisert 23. april 2014">Publisert 23. april 2014</time>
         </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="/assets/test/978x.jpg">
             </figure>
             <h1 itemprop="headline" class="headline">Politiet vil fengsle SOS Rasisme-leder i fire uker</h1>
             <p itemprop="description" class="standfirst">Ifølge politiet tappet Kjell Gunnar Larsen SOS Rasisme for beløp i millionklassen.</p>
             <time class="published" itemprop="datePublished" datetime="2014-04-23" title="Publisert 23. april 2014">Publisert 23. april 2014</time>
         </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="/assets/test/978x.jpg">
             </figure>
             <h1 itemprop="headline" class="headline">Politiet vil fengsle SOS Rasisme-leder i fire uker</h1>
             <p itemprop="description" class="standfirst">Ifølge politiet tappet Kjell Gunnar Larsen SOS Rasisme for beløp i millionklassen.</p>
             <span class="label">VIDEO</span><time class="published" itemprop="datePublished" datetime="2014-04-23" title="Publisert 23. april 2014">Publisert 23. april 2014</time>
         </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="/assets/test/978x.jpg">
      <h1 itemprop="headline" class="headline">Politiet vil fengsle SOS Rasisme-leder i fire uker</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.dagbladet.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.dagbladet.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>