Styleguide 0.1.0

30 - Spotlight

Spotlight is Se og Hørs celebrity encyclopedia

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>