30.1 - Celeb top fact
- Navn
- Rachel Meghan Markle
- Yrke
- Skuespiller, modell
- Født
- 4 august 1981, Los Angeles
- Kjent fra
- TV-serien Suits. Det britiske kongehus
- Sivilstatus
- Gift med Prins Harry
<div class="columns small-12 medium-6 spotlight"> <dl class="celeb-fact"> <dt>Navn</dt> <dd> Rachel Meghan Markle</dd> <dt>Yrke</dt> <dd> Skuespiller, modell</dd> <dt>Født</dt> <dd> 4 august 1981, Los Angeles</dd> <dt>Kjent fra</dt> <dd>TV-serien Suits. Det britiske kongehus</dd> <dt>Sivilstatus</dt> <dd> Gift med Prins Harry</dd> </dl> </div>
30.2 - Section-header
Used to mark editorial blocks of content. Combine with text colors for variation.
Relaterte personer
<div class="spotlight"> <h5 class="section-header heading">Relaterte personer</h5> </div>
30.2.2 - Size
Used to mark editorial blocks of content.
Relaterte personer
Relaterte personer
Relaterte personer
Relaterte personer
Relaterte personer
Relaterte personer
<div class="spotlight"> <h1 class="section-header heading">Relaterte personer</h1> <h2 class="section-header heading">Relaterte personer</h2> <h3 class="section-header heading">Relaterte personer</h3> <h4 class="section-header heading">Relaterte personer</h4> <h5 class="section-header heading">Relaterte personer</h5> <h6 class="section-header heading">Relaterte personer</h6> </div>
30.3 - Article List mobile
<div class="panel small-6 columns has-section-title spotlight"> <h4 class="section-title center {$modifiers}"><span>Dette er saken</span></h4> <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> </div>
30.3.1 - Article List desktop
<div class="panel small-12 columns has-section-title spotlight"> <h4 class="section-title center {$modifiers}"><span>Dette er saken</span></h4> <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> </div>
30.4 - Scroll snap for article preview
<div class="row scrollsnap-wrapper spotlight"> <h1 class="headline scrollsnap-title">Relaterte personer</h1> <div class="scroll-container"> <div class="snap-scroller"> <article class="inside preview" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="#"> <a href="#" itemprop="url"> <figure> <img itemprop="image" title="" alt="" src="/assets/spotlight/royals/harry.jpg"> </figure> <h1 itemprop="headline" class="headline">- Prins Harry</h1> </a> </article> <article class="inside preview" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="#"> <a href="#" itemprop="url"> <figure> <img itemprop="image" title="" alt="" src="/assets/spotlight/royals/will.jpg"> </figure> <h1 itemprop="headline" class="headline">- Prins William - Hertugen av Cambridge</h1> </a> </article> <article class="inside preview" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="#"> <a href="#" itemprop="url"> <figure> <img itemprop="image" title="" alt="" src="/assets/spotlight/royals/kate.jpg"> </figure> <h1 itemprop="headline" class="headline">- Hertuginne Kate av Cambridge</h1> </a> </article> <article class="inside preview" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="#"> <a href="#" itemprop="url"> <figure> <img itemprop="image" title="" alt="" src="/assets/spotlight/royals/adams.jpg"> </figure> <h1 itemprop="headline" class="headline">Patric Adams</h1> </a> </article> <article class="inside preview" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="#"> <a href="#" itemprop="url"> <figure> <img itemprop="image" title="" alt="" src="/assets/spotlight/royals/queen.jpg"> </figure> <h1 itemprop="headline" class="headline">- Dronning Elisabeth</h1> </a> </article> <article class="inside preview" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="#"> <a href="#" itemprop="url"> <figure> <img itemprop="image" title="" alt="" src="/assets/spotlight/royals/charles.jpg"> </figure> <h1 itemprop="headline" class="headline">- Prins Charles</h1> </a> </article> </div> </div> </div>
30.5 - Article preview kicker
<div class="row spotlight"> <article class="preview small-12 columns" itemscope itemtype="http://schema.org/NewsArticle" role="article"> <a itemprop="url"> <div class="kicker">Super sjokk</div> <img itemprop="image" title="" alt="" src="/assets/test/978x.jpg"> <h2 itemprop="headline" class="headline">Politiet vil fengsle SOS Rasisme-leder i fire uker</h2> <p itemprop="description" class="standfirst">Ifølge politiet tappet Kjell Gunnar Larsen SOS Rasisme for beløp i millionklassen.</p> </a> </article> </div>