Styleguide 0.28.5

12 - Section-title

Used to mark small editorial blocks of content.

Dette er saken

<h4 class="section-title"><span>Dette er saken</span></h4>

12.1.1 - Colors

Dette er saken

.primary

Primary

Dette er saken

.secondary

Secondary

Dette er saken

.teal

Teal

Dette er saken

.black

Black

Dette er saken

.blue

Blue

Dette er saken

<h4 class="section-title {$modifiers}"><span>Dette er saken</span></h4>

12.1.2 - Alignment

Dette er saken

.center

success

Dette er saken

.right

info

Dette er saken

<h4 class="section-title {$modifiers}"><span>Dette er saken</span></h4>

12.1.3 - Sizes

Dette er saken

<h1 class="section-title"><span>Dette er saken</span></h1>
<h2 class="section-title"><span>Dette er saken</span></h2>
<h3 class="section-title"><span>Dette er saken</span></h3>
<h4 class="section-title"><span>Dette er saken</span></h4>
<h5 class="section-title"><span>Dette er saken</span></h5>
<h6 class="section-title"><span>Dette er saken</span></h6>

12.2 - Section-title menu

Used to separate sections on the front page of vi.no

<div class="section-menu">
     <div class="section-menu-top">
         <a href="https://vi.no/helse"> <h4 class="section-title"><span>Helse</span></h4></a>
         <a href="https://vi.no/helse" class="go-to-link hide-for-small"> Gå til helse </a>
     </div>
     <div class="section-menu-items">
         <a href="#">Trening</a>
         <a href="#">Mat</a>
         <a href="#">Medisin</a>
         <a href="#">Søvn</a>
         <a href="#">Psykisk</a>
         <a href="#">Blodtrykk</a>
     </div>
</div>

12.3 - Section-header

Used to mark large editorial blocks of content.

Touch the Cornballer

<div class="section-header">
   <h5 class="heading">Touch the Cornballer</h5>
</div>

12.4 - Content Marketing

Used to mark content as content marketing.

Annonsørinnhold

<div class="small-12 medium-12 large-12 columns content-marketing-ribbon"><p>Annonsørinnhold</p></div>