styleguide 0.30.11

22 - Article lists

A label-text can be added for additional information, such as number of comments, if it's a video, or if it requires a subscription to read.

22.1 - Ordered list

<ol class="article-list">
  <li><a href="#">Hoppet som gjør konkurrentene rasende <span class="label-text">(253 kommentarer)</span></a></li>
  <li><a href="#">Da Louis Van Gaal fikk se formen til rekordkjøpet Luke Shaw, ble han forferdet <span class="label-text">(Pluss)</span></a></li>
  <li><a href="#">Elsker nordmennene i «Hercules» <span class="label-text">(video)</span></a></li>
</ol>

22.1.1 - Thumbnails

<ol class="article-list">
  <li><a href="#"><img src="/assets/placeholder/60x60.png" /> Hoppet som gjør konkurrentene rasende <span class="label-text">(253 kommentarer)</span></a></li>
  <li><a href="#"><img src="/assets/placeholder/60x60.png" /> Da Louis Van Gaal fikk se formen til rekordkjøpet Luke Shaw, ble han forferdet <span class="label-text">(Pluss)</span></a></li>
  <li><a href="#"><img src="/assets/placeholder/60x60.png" /> Elsker nordmennene i «Hercules» <span class="label-text">(video)</span></a></li>
</ol>

22.2 - Unordered list

<ul class="article-list">
  <li><a href="#">Hoppet som gjør konkurrentene rasende <span class="label-text">(253 kommentarer)</span></a></li>
  <li><a href="#">Da Louis Van Gaal fikk se formen til rekordkjøpet Luke Shaw, ble han forferdet <span class="label-text">(Pluss)</span></a></li>
  <li><a href="#">Elsker nordmennene i «Hercules» <span class="label-text">(video)</span></a></li>
</ul>

22.2.1 - Thumbnails

<ul class="article-list">
  <li><a href="#"><img src="/assets/placeholder/60x60.png" /> Hoppet som gjør konkurrentene rasende <span class="label-text">(253 kommentarer)</span></a></li>
  <li><a href="#"><img src="/assets/placeholder/60x60.png" /> Da Louis Van Gaal fikk se formen til rekordkjøpet Luke Shaw, ble han forferdet <span class="label-text">(Pluss)</span></a></li>
  <li><a href="#"><img src="/assets/placeholder/60x60.png" /> Elsker nordmennene i «Hercules» <span class="label-text">(video)</span></a></li>
</ul>

22.3 - No bullet

<ol class="article-list no-bullet">
  <li><a href="#">Hoppet som gjør konkurrentene rasende <span class="label-text">(253 kommentarer)</span></a></li>
  <li><a href="#">Da Louis Van Gaal fikk se formen til rekordkjøpet Luke Shaw, ble han forferdet <span class="label-text">(Pluss)</span></a></li>
  <li><a href="#">Elsker nordmennene i «Hercules» <span class="label-text">(video)</span></a></li>
</ol>

22.3.1 - Thumbnails

<ol class="article-list no-bullet">
  <li><a href="http://example.com/123"><img src="/assets/placeholder/60x60.png" /> Hoppet som gjør konkurrentene rasende <span class="label-text">(253 kommentarer)</span></a></li>
  <li><a href="http://example.com/456"><img src="/assets/placeholder/60x60.png" /> Da Louis Van Gaal fikk se formen til rekordkjøpet Luke Shaw, ble han forferdet <span class="label-text">(Pluss)</span></a></li>
  <li><a href="http://example.com/789"><img src="/assets/placeholder/60x60.png" /> Elsker nordmennene i «Hercules» <span class="label-text">(video)</span></a></li>
</ol>

22.4 - Color

.primary

Primary

.orange

Orange

.yellow

Yellow

.green

Green

.blue

Blue

.purple

Purple

.burgundy

Burgundy

.pink

Pink

.secondary

Secondary

.black

Black

<div class="row {$modifiers}">
  <div class="small-12 columns">
    <ol class="article-list">
      <li href="#"><a>Hoppet som gjør konkurrentene rasende <span class="label-text">(253 kommentarer)</span></a></li>
      <li href="#"><a>Da Louis Van Gaal fikk se formen til rekordkjøpet Luke Shaw, ble han forferdet <span class="label-text">(Pluss)</span></a></li>
      <li href="#"><a>Elsker nordmennene i «Hercules» <span class="label-text">(video)</span></a></li>
    </ol>
  </div>
</div>