Styleguide 0.1.0

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

<div class="row">
  <article class="preview large-12 medium-12 small-12 columns" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="3074764762">
    <a itemprop="url" class="{$modifiers}">
      <figure>
        <img itemprop="image" title="" alt="" src="/assets/test/978x.jpg">
      </figure>
      <div class="copy-container">
        <h1 itemprop="headline" class="headline">Zayn brøt forlovelsen over sms</h1>
      </div>
    </a>
  </article>
</div>

20.1 - External

<div class="row">
  <article class="preview  large-12 medium-12 small-12 columns reverse" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="3074764762">
    <a itemprop="url" class="{$modifiers}">
      <figure>
        <img itemprop="image" title="" alt="" src="/assets/test/978x.jpg">
      </figure>
      <div class="copy-container">
        <span class="arrow-article"></span>
        <h1 itemprop="headline" class="headline">Zayn brøt forlovelsen over sms</h1>
        <time itemprop="datePublished" class="published" datetime="1995-03-08" title="Publisert 08.03.1995">by angelica martinsen</time>
       <span class="label white">BLOGGINNLEGG</span>
     </div>
    </a>
  </article>
</div>

20.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">
      <figure>
        <img itemprop="image" title="" alt="" src="/assets/test/978x.jpg">
      </figure>
      <div class="copy-container">
        <h2 class="deck">Beløp i millionklassen:</h2>
        <h1 itemprop="headline" class="headline">Zayn brøt forlovelsen over sms</h1>
        <time itemprop="datePublished" class="published" datetime="1995-03-08" title="Publisert 08.03.1995">By angelica martinsen</time>
      </div>
    </a>
  </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

Primary

.secondary

Secondary

<div class="row">
  <article class="preview {$modifiers}  large-12 medium-12 small-12 columns" itemscope itemtype="http://schema.org/NewsArticle" role="article">
    <a itemprop="url">
      <figure>
        <img itemprop="image" title="" alt="" src="/assets/test/978x.jpg">
      </figure>
      <div class="copy-container">
        <h1 itemprop="headline" class="headline">Zayn brøt forlovelsen over sms</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>
        <time itemprop="datePublished" class="published" datetime="1995-03-08" title="Publisert 08.03.1995">by angelica martinsen</time>
      </div>
    </a>
  </article>
</div>

20.9 - Text only

The image can be omitted if none is available.

.primary

Red

.secondary

Secondary

<div class="row">
  <article class="preview {$modifiers}  large-12 medium-12 small-12 columns" itemscope itemtype="http://schema.org/NewsArticle" role="article">
    <a itemprop="url">
        <h1 itemprop="headline" class="headline">Zayn brøt forlovelsen over sms</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">by angelica martinsen</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  large-12 medium-12 small-12 columns" itemscope itemtype="http://schema.org/WPAdBlock" role="article" data-id="3074764762">
    <a itemprop="url" rel="nofollow">
      <figure>
        <img itemprop="image" title="" alt="" src="/assets/test/native-advertisement.jpg">
      </figure>
      <div class="copy-container">
        <h1 itemprop="headline" class="headline">Zayn brøt forlovelsen over sms</h1>
        <p itemprop="description" class="standfirst">Oppskriften finner du her. </p>
        <span class="label-text">fra <span itemprop="publisher">Fjordland</span>
      </div>
    </a>
  </article>
</div>

20.21 - Tall Image

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

<div class="row">
  <article class="preview  large-12 medium-12 small-12 columns padded" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="3074764762">
    <a itemprop="url" class="{$modifiers}">
      <figure>
        <img itemprop="image" title="" alt="" src="/assets/test/jb.jpg">
      </figure>
      <div class="copy-container">
        <h2 class="deck">Starstruck | Beløp i millionklassen  </h2>
        <span class="arrow-article"></span>
        <h1 itemprop="headline" class="headline">Zayn brøt forlovelsen over sms</h1>
        <time itemprop="datePublished" class="published" datetime="1995-03-08" title="Publisert 08.03.1995">onsdag 8. mars 1995</time>
      </div>
    </a>
  </article>
</div>

20.23 - Deck hover

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">
      <figure>
        <img itemprop="image" title="" alt="" src="/assets/test/978x.jpg">
      </figure>
      <div class="copy-container">
        <h2 class="deck">Starstruck | Beløp i millionklassen  </h2>
        <span class="arrow-article"></span>
        <h1 itemprop="headline" class="headline">Zayn brøt forlovelsen over sms</h1>
        <time itemprop="datePublished" class="published" datetime="1995-03-08" title="Publisert 08.03.1995">onsdag 8. mars 1995</time>
      </div>
    </a>
  </article>
</div>

20.24 - Video

<div class="row">
  <article class="preview  large-12 medium-12 small-12 columns reverse" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="3074764762">
    <a itemprop="url" class="{$modifiers}">
      <figure>
        <img itemprop="image" title="" alt="" src="/assets/test/978x.jpg">
      </figure>
      <div class="copy-container">
        <h1 itemprop="headline" class="headline">Zayn brøt forlovelsen over sms</h1>
        <time itemprop="datePublished" class="published" datetime="1995-03-08" title="Publisert 08.03.1995">by angelica martinsen</time>
      </div>
    </a>
  </article>
</div>

20.25 - Kitchen sink

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">
      <figure>
        <img itemprop="image" title="" alt="" src="/assets/test/978x.jpg">
      </figure>
      <div class="copy-container">
        <h2 class="deck">Starstruck | Beløp i millionklassen  </h2>
        <span class="arrow-article"></span>
        <h1 itemprop="headline" class="headline">Zayn brøt forlovelsen over sms</h1>
        <time itemprop="datePublished" class="published" datetime="1995-03-08" title="Publisert 08.03.1995">By angelica martinsen</time>
      </div>
    </a>
  </article>
  <article class="preview large-12 medium-12 small-12 columns {$modifiers}" itemscope itemtype="http://schema.org/NewsArticle" role="article">
    <a itemprop="url">
      <figure>
        <img itemprop="image" title="" alt="" src="/assets/test/978x.jpg">
      </figure>
      <div class="copy-container">
        <h2 class="deck">Starstruck | Beløp i millionklassen  </h2>
        <span class="arrow-article"></span>
        <h1 itemprop="headline" class="headline">Zayn brøt forlovelsen over sms</h1>
        <time itemprop="datePublished" class="published" datetime="1995-03-08" title="Publisert 08.03.1995">By angelica martinsen</time>
      </div>
    </a>
  </article>
  <article class="preview large-12 medium-12 small-12 columns {$modifiers}" itemscope itemtype="http://schema.org/NewsArticle" role="article">
    <a itemprop="url">
      <figure>
        <img itemprop="image" title="" alt="" src="/assets/test/978x.jpg">
      </figure>
      <div class="copy-container">
        <h2 class="deck">Starstruck | Beløp i millionklassen  </h2>
        <span class="arrow-article"></span>
        <h1 itemprop="headline" class="headline">Zayn brøt forlovelsen over sms</h1>
        <time itemprop="datePublished" class="published" datetime="1995-03-08" title="Publisert 08.03.1995">By angelica martinsen</time>
      </div>
    </a>
  </article>
  <article class="preview large-12 medium-12 small-12 columns {$modifiers}" itemscope itemtype="http://schema.org/NewsArticle" role="article">
    <a itemprop="url">
      <figure>
        <img itemprop="image" title="" alt="" src="/assets/test/978x.jpg">
      </figure>
      <div class="copy-container">
        <h2 class="deck">Starstruck | Beløp i millionklassen  </h2>
        <span class="arrow-article"></span>
        <h1 itemprop="headline" class="headline">Zayn brøt forlovelsen over sms</h1>
        <time itemprop="datePublished" class="published" datetime="1995-03-08" title="Publisert 08.03.1995">By angelica martinsen</time>
      </div>
    </a>
  </article>
  <article class="preview large-12 medium-12 small-12 columns {$modifiers}" itemscope itemtype="http://schema.org/NewsArticle" role="article">
    <a itemprop="url">
      <figure>
        <img itemprop="image" title="" alt="" src="/assets/test/978x.jpg">
      </figure>
      <div class="copy-container">
        <h2 class="deck">Starstruck | Beløp i millionklassen  </h2>
        <span class="arrow-article"></span>
        <h1 itemprop="headline" class="headline">Zayn brøt forlovelsen over sms</h1>
        <time itemprop="datePublished" class="published" datetime="1995-03-08" title="Publisert 08.03.1995">By angelica martinsen</time>
      </div>
    </a>
  </article>
  <article class="preview large-12 medium-12 small-12 columns {$modifiers}" itemscope itemtype="http://schema.org/NewsArticle" role="article">
    <a itemprop="url">
      <figure>
        <img itemprop="image" title="" alt="" src="/assets/test/978x.jpg">
      </figure>
      <div class="copy-container">
        <h2 class="deck">Starstruck | Beløp i millionklassen  </h2>
        <span class="arrow-article"></span>
        <h1 itemprop="headline" class="headline">Zayn brøt forlovelsen over sms</h1>
        <time itemprop="datePublished" class="published" datetime="1995-03-08" title="Publisert 08.03.1995">By angelica martinsen</time>
      </div>
    </a>
  </article>
</div>

20.26 - Article bottom

In article bottoms we use tre articles side by side

<div class="row">
  <article class="preview large-4 medium-4 small-12 columns {$modifiers}" itemscope itemtype="http://schema.org/NewsArticle" role="article">
    <a itemprop="url">
      <figure>
        <img itemprop="image" title="" alt="" src="/assets/test/978x.jpg">
      </figure>
      <div class="copy-container">
        <h2 class="deck">Starstruck | Beløp i millionklassen  </h2>
        <span class="arrow-article"></span>
        <h1 itemprop="headline" class="headline">Zayn brøt forlovelsen over sms</h1>
        <time itemprop="datePublished" class="published" datetime="1995-03-08" title="Publisert 08.03.1995">By angelica martinsen</time>
      </div>
    </a>
  </article>
  <article class="preview large-4 medium-4 small-12 columns {$modifiers}" itemscope itemtype="http://schema.org/NewsArticle" role="article">
    <a itemprop="url">
      <figure>
        <img itemprop="image" title="" alt="" src="/assets/test/978x.jpg">
      </figure>
      <div class="copy-container">
        <h2 class="deck">Starstruck | Beløp i millionklassen  </h2>
        <span class="arrow-article"></span>
        <h1 itemprop="headline" class="headline">Zayn brøt forlovelsen over sms</h1>
        <time itemprop="datePublished" class="published" datetime="1995-03-08" title="Publisert 08.03.1995">By angelica martinsen</time>
      </div>
    </a>
  </article>
  <article class="preview large-4 medium-4 small-12 columns {$modifiers}" itemscope itemtype="http://schema.org/NewsArticle" role="article">
    <a itemprop="url">
      <figure>
        <img itemprop="image" title="" alt="" src="/assets/test/978x.jpg">
      </figure>
      <div class="copy-container">
        <h2 class="deck">Starstruck | Beløp i millionklassen  </h2>
        <span class="arrow-article"></span>
        <h1 itemprop="headline" class="headline">Zayn brøt forlovelsen over sms</h1>
        <time itemprop="datePublished" class="published" datetime="1995-03-08" title="Publisert 08.03.1995">By angelica martinsen</time>
      </div>
    </a>
  </article>
</div>