styleguide 0.30.11

14 - Labels

Video
<span class="label">Video</span>

14.1 - Colors

Section Section
.orange

Orange

Section Section
.yellow

Yellow

Section Section
.green

Green

Section Section
.blue

Blue

Section Section
.purple

Purple

Section Section
.burgundy

Burgundy

Section Section
.pink

Pink

Section Section
.secondary

Secondary

Section Section
.black

Black

Section Section
.white

White

Section Section
<span class="label {$modifiers}">Section</span>
<span class="label outline {$modifiers}">Section</span>

14.2 - Icons

Video
<span class="label"><span class="icon-Video"></span>Video</span>

14.3 - List

  • Nyheter
  • Innenriks
  • SOS Rasisme
<ul class="labels">
  <li>Nyheter</li><li>Innenriks</li><li>SOS Rasisme</li>
</ul>

14.4 - Label-text

Innenriks SOS Rasisme avsløringen
<span class="label">Innenriks</span> <span class="label-text">SOS Rasisme avsløringen</span>

14.5 - Review Labels

Use these labels in review articles and article previews.

14.5.1 - Culture label

Plateanmeldelse Anmeldelse av Jamie XX - In Colour
<span class="label culture-review">Plateanmeldelse</span> <span class="label-text">Anmeldelse av Jamie XX - In Colour</span>

14.5.2 - Motor label

Biltest Test av Mercedes-Benz GLS
<span class="label car-review">Biltest</span> <span class="label-text">Test av Mercedes-Benz GLS</span>

14.5.3 - Wine label

Vinanmeldelse Test av Alleno & Chapoutier Côtes du Rhône
<span class="label wine-review">Vinanmeldelse</span> <span class="label-text">Test av Alleno &amp; Chapoutier Côtes du Rhône</span>

14.6 - Label-pluss

Du leser nå Dagbladet Pluss
<span class="label pluss-notice">Du leser nå <strong>Dagbladet Pluss</strong></span>

14.6.1 - Label-pluss-grey

Du leser nå Dagbladet Pluss
<div class="label pluss-notice-grey">
 <div class="pluss-centered-wrapper">
   <div class="pluss-cross-grey">
     <svg version="1.1" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
       <g fill="none" fill-rule="evenodd">
         <g transform="translate(-592 -202)" fill="#4b4b4b">
           <path d="m612.5 213.5h11.5v9h-11.5v11.5h-9v-11.5h-11.5v-9h11.5v-11.5h9v11.5z"/>
         </g>
       </g>
     </svg>
   </div>
   <div class="pluss-cross-text">
     <span>Du leser nå Dagbladet Pluss</span>
   </div>
 </div>
</div>

14.7 - Old article label

Hei, denne artikkelen er over ett år gammel. Vær oppmerksom på at den kan inneholde utdatert informasjon.
<span class="old-article-highlight"> Hei, denne artikkelen er <strong> over ett år gammel</strong>. Vær oppmerksom på at den kan inneholde utdatert informasjon.</span>