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="http://placehold.it/60x60" /> Hoppet som gjør konkurrentene rasende <span class="label-text">(253 kommentarer)</span></a></li> <li><a href="#"><img src="http://placehold.it/60x60" /> 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="http://placehold.it/60x60" /> 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="http://placehold.it/60x60" /> Hoppet som gjør konkurrentene rasende <span class="label-text">(253 kommentarer)</span></a></li> <li><a href="#"><img src="http://placehold.it/60x60" /> 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="http://placehold.it/60x60" /> 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="http://placehold.it/60x60" /> Hoppet som gjør konkurrentene rasende <span class="label-text">(253 kommentarer)</span></a></li> <li><a href="http://example.com/456"><img src="http://placehold.it/60x60" /> 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="http://placehold.it/60x60" /> 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>