Nå svarer han på utroskapsanklagene
Ifølge politiet tappet Kjell Gunnar Larsen SOS Rasisme for beløp i millionklassen.
111The 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>
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>
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"> </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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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"> </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>
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"> </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>
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>
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>
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&x=0&y=0&cropw=100&croph=54.14364640884&width=321&height=161&compression=80 640w, //dbstatic.no/70659131.jpg?imageId=70659131&x=0&y=0&cropw=100&croph=54.14364640884&width=512&height=256&compression=80 1024w, //dbstatic.no/70659131.jpg?imageId=70659131&x=0&y=0&cropw=100&croph=54.14364640884&width=640&height=320&compression=70 320w" src="//dbstatic.no/70659131.jpg?imageId=70659131&x=0&y=0&cropw=100&croph=54.14364640884&width=640&height=320&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>
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>
.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>
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>
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>
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>