Politiet vil fengsle SOS Rasisme-leder i fire uker
Ifølge politiet tappet Kjell Gunnar Larsen SOS Rasisme for beløp i millionklassen.
111 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.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"> </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.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.5.5 - Image labels (Automatic)
Lables can be used to mark type of content or as a signpost marking regular columns and article series.
pluss Pluss
magasinet Magasinet
video Video
meninger Opinion
live Live
<div class="row">
<article class="preview small-12 columns" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-label="{$modifiers}">
<a itemprop="url">
<figure style="padding-bottom: 56%">
<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>
</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"> </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
.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">
<div class="article-preview-text">
<h1 itemprop="headline" class="headline"><span class="yellow">Politiet</span> vil fengsle SOS Rasisme-leder i fire uker</h1>
</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">
<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">
<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.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.
Politiet vil fengsle SOS Rasisme-leder i fire uker
Ifølge politiet tappet Kjell Gunnar Larsen SOS Rasisme for beløp i millionklassen.
Politiet vil fengsle SOS Rasisme-leder i fire uker
Ifølge politiet tappet Kjell Gunnar Larsen SOS Rasisme for beløp i millionklassen.
Politiet vil fengsle SOS Rasisme-leder i fire uker
Ifølge politiet tappet Kjell Gunnar Larsen SOS Rasisme for beløp i millionklassen.
VIDEO<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> 20.19 - Article compact
A compact article
<div class="row">
<article class="preview secondary compact large-12 medium-12 small-12 columns {$modifiers}" itemscope itemtype="http://schema.org/NewsArticle" role="article">
<a itemprop="url">
<div class="kicker">Dette er en kicker</div>
<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>
</div>
</a>
</article>
</div> 20.20 - Article Critical
A critical article
<main class="compact">
<div class="row">
<article data-label="live" class="preview critical-news compact large-12 medium-12 small-12 columns {$modifiers}" itemscope itemtype="http://schema.org/NewsArticle" role="article">
<a itemprop="url">
<div class="kicker">Dette er en kicker</div>
<figure style="min-height: 437px"><img itemprop="image" title="" alt="" src="/assets/test/978x.jpg"></figure>
<div class="article-preview-text">
<h2 class="deck"><span>Beløp i millionklassen</span></h2>
<h1 itemprop="headline" class="headline"><span>Politiet vil fengsle SOS Rasisme-leder i fire uker</span></h1>
</div>
</a>
</article>
</div>
</main> 20.21 - Breaking news with pulsating kicker
A styling for when theres breaking news events
.black Black
.yellow Yellow
.primary Primary
.orange Orange
.green Green
.blue Blue
.purple Purple
.pink Pink
.secondary Secondary
.teal Teal
<main class="compact">
<div class="row">
<article class="preview {$modifiers} breaking--pulse-kicker compact large-12 medium-12 small-12 columns" itemscope itemtype="http://schema.org/NewsArticle" role="article">
<a itemprop="url">
<div class="kicker">Dette er en kicker</div>
<figure style="padding-bottom: 50%;"><img itemprop="image" title="" alt="" src="/assets/test/978x.jpg"></figure>
<div class="article-preview-text">
<h2 class="deck"><span>Beløp i millionklassen</span></h2>
<h1 itemprop="headline" class="headline"><span>Politiet vil fengsle SOS Rasisme-leder i fire uker</span></h1>
</div>
</a>
</article>
</div>
</main> 20.22 - Breaking news with marquee style
A styling for when theres breaking news events
.black Black
.yellow Yellow
.primary Primary
.orange Orange
.green Green
.blue Blue
.purple Purple
.pink Pink
.secondary Secondary
.teal Teal
<main class="compact">
<div class="row">
<article class="preview {$modifiers} breaking--just-now compact large-12 medium-12 small-12 columns" itemscope itemtype="http://schema.org/NewsArticle" role="article">
<a itemprop="url">
<figure style="padding-bottom: 50%;"><img itemprop="image" title="" alt="" src="/assets/test/978x.jpg"></figure>
<div class="article-preview-text">
<h2 class="deck"><span>Beløp i millionklassen</span></h2>
<h1 itemprop="headline" class="headline"><span>Politiet vil fengsle SOS Rasisme-leder i fire uker</span></h1>
</div>
</a>
</article>
</div>
</main> 20.23 - Breaking news with background pulse
A styling for when theres breaking news events
.black Black
.yellow Yellow
.primary Primary
.green Green
.orange Orange
.blue Blue
.purple Purple
.pink Pink
.secondary Secondary
.teal Teal
<main class="compact">
<div class="row">
<article class="preview {$modifiers} breaking--pulse-background compact large-12 medium-12 small-12 columns" itemscope itemtype="http://schema.org/NewsArticle" role="article">
<a itemprop="url">
<div class="kicker">Dette er en kicker</div>
<figure style="padding-bottom: 50%;"><img itemprop="image" title="" alt="" src="/assets/test/978x.jpg"></figure>
<div class="article-preview-text">
<h2 class="deck"><span>Beløp i millionklassen</span></h2>
<h1 itemprop="headline" class="headline"><span>Politiet vil fengsle SOS Rasisme-leder i fire uker</span></h1>
</div>
</a>
</article>
</div>
</main> 20.24 - Breaking news with background jumping dots
A styling for when theres breaking news events
.black Black
.yellow Yellow
.primary Primary
<main class="compact">
<div class="row">
<article class="preview {$modifiers} breaking--upcoming--jumping compact large-12 medium-12 small-12 columns" itemscope itemtype="http://schema.org/NewsArticle" role="article">
<a itemprop="url">
<div class="kicker"><div class="dots"><span class="one"></span><span class="two"></span><span class="three"></span></div>Dette er en kicker</div>
<figure style="padding-bottom: 50%;"><img itemprop="image" title="" alt="" src="/assets/test/978x.jpg"></figure>
<div class="article-preview-text">
<h2 class="deck"><span>Beløp i millionklassen</span></h2>
<h1 itemprop="headline" class="headline"><span>Politiet vil fengsle SOS Rasisme-leder i fire uker</span></h1>
</div>
</a>
</article>
</div>
</main> 20.25 - Breaking news with background fading dots
A styling for when theres breaking news events
.black Black
.yellow Yellow
.primary Primary
<main class="compact">
<div class="row">
<article class="preview {$modifiers} breaking--upcoming--fading compact large-12 medium-12 small-12 columns" itemscope itemtype="http://schema.org/NewsArticle" role="article">
<a itemprop="url">
<div class="kicker"><div class="dots"><span class="one"></span><span class="two"></span><span class="three"></span></div>Dette er en kicker</div>
<figure style="padding-bottom: 50%;"><img itemprop="image" title="" alt="" src="/assets/test/978x.jpg"></figure>
<div class="article-preview-text">
<h2 class="deck"><span>Beløp i millionklassen</span></h2>
<h1 itemprop="headline" class="headline"><span>Politiet vil fengsle SOS Rasisme-leder i fire uker</span></h1>
</div>
</a>
</article>
</div>
</main>