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>
22.6 - list with ingress and read more button
-
Blod og Sæd i urin
Hei! Fikk voldsomme hosteanfall i mai, spesielt på morgenen, ikke hver dag. Anfallene startet med tørrhoste, og varte i noen minutter. Ble veldi
les Mer -
Mulig brudd i ryggen
Hei! Fikk voldsomme hosteanfall i mai, spesielt på morgenen, ikke hver dag. Anfallene startet med tørrhoste, og varte i noen minutter. Ble veldi
les Mer -
Tannkjøttlomme med betennelse et ekkelt sted på en enkelt tann
Hei! Fikk voldsomme hosteanfall i mai, spesielt på morgenen, ikke hver dag. Anfallene startet med tørrhoste, og varte i noen minutter. Ble veldi
les Mer -
Var det borelia, den røde ringen?
Hei! Fikk voldsomme hosteanfall i mai, spesielt på morgenen, ikke hver dag. Anfallene startet med tørrhoste, og varte i noen minutter. Ble veldig stor og farlig
les Mer
<ol class="article-list no-bullet"> <li> <a href="#"><h4>Blod og Sæd i urin </h4> <p itemprop="description" class="standfirst">Hei! Fikk voldsomme hosteanfall i mai, spesielt på morgenen, ikke hver dag. Anfallene startet med tørrhoste, og varte i noen minutter. Ble veldi</p> </a> <a>les Mer<img src="../assets/icon/arrow.svg"></a> </li> <li> <a href="#"><h4>Mulig brudd i ryggen</h4> <p itemprop="description" class="standfirst">Hei! Fikk voldsomme hosteanfall i mai, spesielt på morgenen, ikke hver dag. Anfallene startet med tørrhoste, og varte i noen minutter. Ble veldi</p> </a> <a>les Mer<img src="../assets/icon/arrow.svg"></a> </li> <li> <a href="#"><h4>Tannkjøttlomme med betennelse et ekkelt sted på en enkelt tann</h4> <p itemprop="description" class="standfirst">Hei! Fikk voldsomme hosteanfall i mai, spesielt på morgenen, ikke hver dag. Anfallene startet med tørrhoste, og varte i noen minutter. Ble veldi</p> </a> <a>les Mer<img src="../assets/icon/arrow.svg"></a> </li> <li> <a href="#"><h4>Var det borelia, den røde ringen?</h4> <p itemprop="description" class="standfirst">Hei! Fikk voldsomme hosteanfall i mai, spesielt på morgenen, ikke hver dag. Anfallene startet med tørrhoste, og varte i noen minutter. Ble veldig stor og farlig</p> </a> <a>les Mer<img src="../assets/icon/arrow.svg"></a> </li> </ol>