Styleguide 0.30.11

36 - Pluss

Styles for pluss

36.1 - Chapter info

A small variation in styling used for special and magasinet

Foreldreskolen

Vet du hva du får i pensjon? Vet du hvilke grep du bør ta - og hvilke feller du bør unngå - for å sikre økonomien som pensjonist? Dagbladets Pensjonsskole har alle svarene - og de gode rådene.

<div class="row">
     <div class="chapter-preview">
         <img src="https://images.unsplash.com/photo-1464054313797-e27fb58e90a9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=576bb45620043f729baef96301c9acb6" alt="">
         <h1 role="headline" class="headline">Foreldreskolen</h1>
         <p class="standfirst">Vet du hva du får i pensjon? Vet du hvilke grep du bør ta - og hvilke feller du bør unngå - for å sikre økonomien som pensjonist? Dagbladets Pensjonsskole har alle svarene - og de gode rådene.</p>
     </div>
</div>

36.2 - Pluss tag

A tag that shows you that you're reading a "pluss article"

Du leser nå en sak på Dagbladet pluss
<div class="row">
    <div class="small-12 column text-center end">
        <div class="reading-pluss">
            <i class="pluss-icon">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="26px" height="27px" viewBox="0 0 26 27" version="1.1"><defs><polygon points="12.8742617 26 0 26 0 0.906 12.8742617 0.906 25.7485234 0.906 25.7485234 26"/></defs><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(0.000000, 0.093900)"><mask fill="white"><use xlink:href="#path-1"/></mask><path d="M25.7485234 26L2.4696887 26C1.10601913 26-0.000102608696 24.923-0.000102608696 23.594L-0.000102608696 3.313C-0.000102608696 1.984 1.10601913 0.906 2.4696887 0.906L25.7485234 0.906 25.7485234 26Z" fill="#222222" mask="url(#mask-2)"/></g><path d="M12.874313 9.547L12.874313 17.547M8.76996522 13.547L16.9786609 13.547" stroke="#FFFFFF" stroke-width="2"/></g></svg>
            </i>
            <span>
                Du leser nå en sak på <b>Dagbladet pluss</b>
            </span>
        </div>
    </div>
</main>