Styleguide 0.1.0

21 - Row

21.1 - Deck

<section class="row secondary">
  <h1 class="deck">Dagbladet avslører:</h1>
  <article class="preview secondary small-12 medium-6 large-6 columns" itemscope itemtype="http://schema.org/NewsArticle" role="article">
    <a itemprop="url">
      <img itemprop="image" title="" alt="" src="http://gfx.dagbladet.no/labrador/269/269931/26993179/jpg/active/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>
  <article class="preview secondary small-12 medium-6 large-6 columns" itemscope itemtype="http://schema.org/NewsArticle" role="article">
    <a itemprop="url">
      <img itemprop="image" title="" alt="" src="http://gfx.dagbladet.no/labrador/330/330145/33014523/jpg/active/978x.jpg">
      <h1 itemprop="headline" class="headline">- Trondheim kommune politianmelder SOS Rasisme</h1>
      <p itemprop="description" class="standfirst">Dagblad-avsløring utløste gransking i Trondheim kommune. Nå reagerer politikerne.</p>
      <time itemprop="datePublished" class="published" datetime="1995-03-08" title="Publisert 08.03.1995">onsdag 8. mars 1995</time>
    </a>
  </article>
</section>

21.2 - Color

.primary

Red

.yellow

Yellow

.blue

Blue

.secondary

Secondary

.black

Black

<section class="row {$modifiers}">
  <h1 class="deck">Dagbladet avslører:</h1>
  <article class="preview {$modifiers} small-12 medium-6 large-6 columns" itemscope itemtype="http://schema.org/NewsArticle" role="article">
    <a itemprop="url">
      <img itemprop="image" title="" alt="" src="http://gfx.dagbladet.no/labrador/269/269931/26993179/jpg/active/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>
  <article class="preview {$modifiers} small-12 medium-6 large-6 columns" itemscope itemtype="http://schema.org/NewsArticle" role="article">
    <a itemprop="url">
      <img itemprop="image" title="" alt="" src="http://gfx.dagbladet.no/labrador/330/330145/33014523/jpg/active/978x.jpg">
      <h1 itemprop="headline" class="headline">- Trondheim kommune politianmelder SOS Rasisme</h1>
      <p itemprop="description" class="standfirst">Dagblad-avsløring utløste gransking i Trondheim kommune. Nå reagerer politikerne.</p>
      <time itemprop="datePublished" class="published" datetime="1995-03-08" title="Publisert 08.03.1995">onsdag 8. mars 1995</time>
    </a>
  </article>
</section>

21.2.1 - Nested

  <article class="preview blue small-12 medium-12 large-12 columns" itemscope itemtype="http://schema.org/NewsArticle" role="article">
    <a itemprop="url">
      <img itemprop="image" title="" alt="" src="http://gfx.dagbladet.no/labrador/330/330145/33014523/jpg/active/978x.jpg">
      <h1 itemprop="headline" class="headline small-size-20">- Trondheim kommune politianmelder SOS Rasisme</h1>
      <p itemprop="description" class="standfirst">Dagblad-avsløring utløste gransking i Trondheim kommune. Nå reagerer politikerne.</p>
      <time itemprop="datePublished" class="published" datetime="1995-03-08" title="Publisert 08.03.1995">onsdag 8. mars 1995</time>
    </a>
  </article>
</div>

Markup:
Markup:

21.3 - Collapsed

<div class="frontpage">
        <article class="preview blue small-12 medium-12 large-12 columns" itemscope itemtype="http://schema.org/NewsArticle" role="article">
          <a itemprop="url">
            <img itemprop="image" title="" alt="" src="http://gfx.dagbladet.no/labrador/330/330145/33014523/jpg/active/978x.jpg">
            <h1 itemprop="headline" class="headline small-size-20">- Trondheim kommune politianmelder SOS Rasisme</h1>
            <p itemprop="description" class="standfirst">Dagblad-avsløring utløste gransking i Trondheim kommune. Nå reagerer politikerne.</p>
            <time itemprop="datePublished" class="published" datetime="1995-03-08" title="Publisert 08.03.1995">onsdag 8. mars 1995</time>
          </a>
        </article>
      </div>
    </div>
  </section>
</div>

21.4 - Extrinsic content

When displaying a row of content that links to articles from other sites the deck must read Eksternt innhold. Additionally see Article preview extinsic content.

<div class="row extrinsic">
  <div class="deck">Eksternt innhold</div>
  <article class="preview small-4 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/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>
  <article class="preview small-4 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/extrinsic-2.jpg">
      <h1 itemprop="headline" class="headline">Slik blir du enkelt kvitt tørre føtter</h1>
      <p itemprop="description" class="standfirst">Tørr, død hud er både ekkelt og ubehagelig.</p>
      <span class="label pink" itemprop="publisher">KK</span> <time itemprop="datePublished" class="published" datetime="1995-03-08" title="Publisert 08.03.1995">onsdag 8. mars 1995</time>
    </a>
  </article>
  <article class="preview small-4 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/extrinsic-3.jpg">
      <h1 itemprop="headline" class="headline">12 «regler» alle småbarn lever etter</h1>
      <p itemprop="description" class="standfirst">Lever du under disse herlige regelrytterne?</p>
      <span class="label" itemprop="publisher">SOL</span> <time itemprop="datePublished" class="published" datetime="1995-03-08" title="Publisert 08.03.1995">onsdag 8. mars 1995</time>
    </a>
  </article>
</div>