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>

22.4.6 - Data labels on article related articles

<main class="frontpage compact no-pad">
	<article id="article_71365597" class="preview   columns large-12 small-12 medium-12   black breaking--just-now compact related" itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" role="article" data-id="71369379" data-label="">
		<a itemprop="url" href="#">
			<figure style="padding-bottom: 50%;">
				<img class="" itemprop="image" src="//dbstatic.no/70511702.jpg?imageId=70511702&amp;x=0&amp;y=0&amp;cropw=0&amp;croph=0&amp;width=1024&amp;height=512&amp;compression=80">
			</figure>
			<div class="article-preview-text">
				<h2 class="deck "> dømt til fem år:</h2>
				<h1 class="headline large-size-74">Nå: Skuffet og overrasket - anker </h1>
			</div>
		</a>
		<aside class="related">
			<ul class="related-list has-image">
				<li itemtype="https://schema.org/NewsArticle" itemscope="" data-label="pluss">
					<a itemprop="url name headline" href="/nyheter/nakenbildet-som-startet-alt/71189839">
						<figure style="display: inline-block; width: 27%; height: 0; padding-bottom: 19.751%;">
							<img style="width: 100%; height: auto;" class="" itemprop="image" src="//dbstatic.no/71369384.jpg?imageId=71369384&amp;x=36.288659793814&amp;y=6.1433447098976&amp;cropw=52.989690721649&amp;croph=63.82252559727&amp;width=257&amp;height=188&amp;compression=80">
						</figure>
						<span class="large-size-69 small-size-40">Nakenbildet som startet alt</span>
					</a>
				</li>
				<li itemtype="https://schema.org/NewsArticle" itemscope="" data-label="meninger">
					<a itemprop="url name headline" href="/nyheter/nakenbildet-som-startet-alt/71189839">
						<figure style="display: inline-block; width: 27%; height: 0; padding-bottom: 19.751%;">
							<img style="width: 100%; height: auto;" class="" itemprop="image" src="//dbstatic.no/71369384.jpg?imageId=71369384&amp;x=36.288659793814&amp;y=6.1433447098976&amp;cropw=52.989690721649&amp;croph=63.82252559727&amp;width=257&amp;height=188&amp;compression=80">
						</figure>
						<span class="large-size-69 small-size-40">Nakenbildet som startet alt</span>
					</a>
				</li>
				<li itemtype="https://schema.org/NewsArticle" itemscope="" data-label="video">
					<a itemprop="url name headline" href="/nyheter/nakenbildet-som-startet-alt/71189839">
						<figure style="display: inline-block; width: 27%; height: 0; padding-bottom: 19.751%;">
							<img style="width: 100%; height: auto;" class="" itemprop="image" src="//dbstatic.no/71369384.jpg?imageId=71369384&amp;x=36.288659793814&amp;y=6.1433447098976&amp;cropw=52.989690721649&amp;croph=63.82252559727&amp;width=257&amp;height=188&amp;compression=80">
						</figure>
						<span class="large-size-69 small-size-40">Nakenbildet som startet alt</span>
					</a>
				</li>
			</ul>
		</aside>
	</article>
</main>