Politiet vil fengsle SOS Rasisme-leder i fire uker
Ifølge politiet tappet Kjell Gunnar Larsen SOS Rasisme for beløp i millionklassen.
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">
<div class="article-preview-text">
<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>
</div>
</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">
<div class="article-preview-text">
<h1 itemprop="headline" class="headline">Politiet vil fengsle SOS Rasisme-leder i fire uker</h1>
</div>
</a>
</article>
</div>
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">
<div class="article-preview-text">
<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>
</div>
</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">
<div class="article-preview-text">
<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>
</div>
</a>
</article>
</div>
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">
<div class="article-preview-text">
<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>
</div>
</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">
<div class="article-preview-text">
<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>
</div>
</a>
</article>
</div>
20.5.3 - Deck
An article can have a secondary title.
<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">
<div class="article-preview-text">
<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>
</div>
</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" 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">
<div class="article-preview-text">
<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>
</div>
</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"> </span>Livestudio</a></li>
<li><a href="#" class="button secondary"><span class="icon-Checkbox-dotted-active align-left"> </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
.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="/assets/test/978x.jpg">
<div class="article-preview-text">
<h1 itemprop="headline" class="headline">Politiet vil fengsle SOS Rasisme-leder i fire uker</h1>
<p itemprop="description" class="standfirst"><span class="icon-Lab"> </span>Ifølge politiet tappet Kjell Gunnar Larsen SOS Rasisme for beløp i millionklassen.</p>
</div>
</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">
<div class="article-preview-text">
<h1 itemprop="headline" class="headline">Politiet vil fengsle SOS Rasisme-leder i fire uker</h1>
</div>
</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: 100%; padding-bottom: 28.58%;">
<img itemprop="image" title="" alt="" src="/assets/test/978x.jpg">
</figure>
<div class="article-preview-text">
<h1 itemprop="headline" class="headline">Politiet vil fengsle SOS Rasisme-leder i fire uker</h1>
</div>
</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">
<div class="kicker">fra fjordland</div>
<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>
</a>
</article>
</div>
20.16 - Article preview horizontal
An article preview which is set horizontal to be listed after eachother.
<div class="row">
<article data-article-category="helse" class="preview horizontal small-12 columns" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="3074764762">
<a itemprop="url">
<figure style="padding-bottom: 12%">
<img itemprop="image" title="" alt="" src="/assets/test/978x.jpg">
</figure>
<div class="article-preview-text">
<h1 itemprop="headline" class="headline">Politiet vil fengsle SOS Rasisme-leder i fire uker SOS Rasisme-leder i fire uker SOS Rasisme-leder i fire uker</h1>
<footer class="article-preview-footer">
<span class="news-source">dagbladet.no</span>
<span class="quicklook"></span>
<span class="more"></span>
</footer>
</div>
</a>
</article>
<article class="preview horizontal small-12 columns" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="3074764762">
<a itemprop="url">
<figure style="padding-bottom: 12%">
<img itemprop="image" title="" alt="" src="/assets/test/978x.jpg">
</figure>
<div class="article-preview-text">
<h1 itemprop="headline" class="headline">Politiet vil fengsle SOS Rasisme-leder i fire uker</h1>
<footer class="article-preview-footer">
<span class="news-source">vi.no</span>
<span class="quicklook"></span>
<span class="more"></span>
</footer>
</div>
</a>
</article>
<article class="preview horizontal small-12 columns" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="3074764762">
<a itemprop="url">
<figure style="padding-bottom: 12%">
<img itemprop="image" title="" alt="" src="/assets/test/978x.jpg">
</figure>
<div class="article-preview-text">
<h1 itemprop="headline" class="headline">Politiet vil fengsle SOS Rasisme-leder i fire uker</h1>
<footer class="article-preview-footer">
<span class="news-source">dagbladet.no</span>
<span class="quicklook"></span>
<span class="more"></span>
</footer>
</div>
</a>
</article>
</div>
20.19 - Categorized articles
These are the different styles for each category
reise
Reise
helse
Helse
motor
Motor
underholdning
Underholdning
sport
Sport
meninger
Meninger
okonomi
Økonomi
<div class="row">
<article class="preview small-12 medium-12 large-12 columns" data-article-category="{$modifiers}" itemscope itemtype="http://schema.org/NewsArticle" role="article">
<a itemprop="url">
<img itemprop="image" title="" alt="" src="/assets/test/978x.jpg">
<div class="article-preview-text">
<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>
</div>
</a>
</article>
</div>
20.20 - Editors recommend / Hero unit
This is the styling for recommended articles by editorial staff.
<div class="row">
<article class="preview small-12 medium-12 large-12 columns hero-preview" itemscope itemtype="http://schema.org/NewsArticle" role="article">
<a itemprop="url">
<img itemprop="image" title="" alt="" src="/assets/test/978x.jpg">
<div class="article-preview-text">
<h2 itemprop="alternativeHeadline" class="deck">Redaksjonen anbefaler</h2>
<h1 itemprop="headline" class="headline">Politiet vil fengsle SOS Rasisme-leder i fire uker</h1>
</div>
</a>
</article>
</div>
20.21 - Editors recommend
This is the styling for recommended articles by editorial staff.
<div class="row">
<article data-label="live" class="preview small-12 medium-12 large-12 columns" itemscope itemtype="http://schema.org/NewsArticle" role="article">
<a itemprop="url">
<img itemprop="image" title="" alt="" src="/assets/test/978x.jpg">
<div class="article-preview-text">
<h2 itemprop="alternativeHeadline" class="deck">Redaksjonen anbefaler</h2>
<h1 itemprop="headline" class="headline">Politiet vil fengsle SOS Rasisme-leder i fire uker</h1>
</div>
</a>
</article>
</div>