Styleguide 0.1.1

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="https://dbstatic.no/70513703.jpg?imageId=70513703&x=0&y=0&cropw=93.511450381679&croph=100&width=980&height=590">
      <h1 itemprop="headline" class="headline large-size-30">- Jeg har ikke skjønt før i ettertid hvor jævlig jeg var</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="https://dbstatic.no/69652525.jpg?imageId=69652525&width=1024&height=615">
      <h1 itemprop="headline" class="headline large-size-22">Treningsblogger Jørgine Vasstrand mener det ikke alltid er enkelt å stå i stormen</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="https://dbstatic.no/70513703.jpg?imageId=70513703&x=0&y=0&cropw=93.511450381679&croph=100&width=980&height=590">
      <h1 itemprop="headline" class="headline large-size-30">- Jeg har ikke skjønt før i ettertid hvor jævlig jeg var</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="https://dbstatic.no/69652525.jpg?imageId=69652525&width=1024&height=615">
      <h1 itemprop="headline" class="headline large-size-22">Treningsblogger Jørgine Vasstrand mener det ikke alltid er enkelt å stå i stormen</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="https://dbstatic.no/70513703.jpg?imageId=70513703&x=0&y=0&cropw=93.511450381679&croph=100&width=980&height=590">
      <h1 itemprop="headline" class="headline large-size-30 small-size-20">- Jeg har ikke skjønt før i ettertid hvor jævlig jeg var</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="https://dbstatic.no/69652525.jpg?imageId=69652525&width=1024&height=615">
            <h1 itemprop="headline" class="headline large-size-30 small-size-20">- Jeg har ikke skjønt før i ettertid hvor jævlig jeg var</h1>
            <p itemprop="description" class="standfirst">Treningsblogger Jørgine Vasstrand mener det ikke alltid er enkelt å stå i stormen.</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="https://dbstatic.no/69652525.jpg?imageId=69652525&width=1024&height=615">
      <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="https://dbstatic.no/69652524.jpg?imageId=69652524&width=1024&height=615">
      <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>