Styleguide 0.30.11

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

.orange

Orange

.yellow

Yellow

.green

Green

.blue

Blue

.purple

Purple

.burgundy

Burgundy

.pink

Pink

.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

<section class="row burgundy">
  <article class="preview burgundy 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 pink 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>
<section class="row purple">
  <article class="preview purple 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 small-size-40">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 class="small-12 medium-6 large-6 columns">
    <div class="row">
      <article class="preview green small-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/330162/33016275/jpg/active/978x.jpg">
          <h1 itemprop="headline" class="headline small-size-20">- Vi fant mer penger enn hva det er normalt å ha hjemme</h1>
          <p itemprop="description" class="standfirst">Politiet om betydelig kontantbeløp funnet under razzia hjemme hos en leder i SOS Rasisme.</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 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>

21.3 - Collapsed

<div class="frontpage">
  <section class="row burgundy collapse">
    <article class="preview burgundy 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 pink 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>
  <section class="row purple collapse">
    <article class="preview purple 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 small-size-40">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 class="small-12 medium-6 large-6 columns">
      <div class="row">
        <article class="preview green small-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/330162/33016275/jpg/active/978x.jpg">
            <h1 itemprop="headline" class="headline small-size-20">- Vi fant mer penger enn hva det er normalt å ha hjemme</h1>
            <p itemprop="description" class="standfirst">Politiet om betydelig kontantbeløp funnet under razzia hjemme hos en leder i SOS Rasisme.</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 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>