34 - Paywall
Call to action element for use with content not available for free consumption. I.e. Paid content. Typically used on “Dagbladet Pluss” and other sections that require a valid subscription or other form of verification before showing content.
To higlight/call focuse to a product in the class .primary.
Paywalls logic should be handled server side.
Note: Products in example are not actual products, they only illustrate markup.
Dagbladet Pluss – de beste historiene
- Over 250 kvalitetsartikler hver måned
- Prisvinnende reportasjer og avsløringer
- Premium artikler innen stoffområder som bil, båt, trening, samliv, vin og reise
- Tilgang til hele papiravisen og Magasinet på PC/Mac, mobil og nettbrett
- Ved abonnering på Dagbladet Pluss, godtar du våre kjøps- og bruksvilkår.
- Abonnementet fornyes automatisk, og løper til du sier opp.
- Abonnementet har ingen bindingstid. Du kan si det opp når som helst.
Betal trygt med Visa eller Mastercard.
Har du allerede abonnement?
Logg inn<div class="paywall">
<h3>Dagbladet Pluss – de beste historiene</h3>
<!--<div class="large-12 columns campaign-info">
<p class="text-center">
<strong>Notice:</strong> there is room for campaign text. <a href="#">Clicky</a>
</p>
</div>-->
<div class="large-12 columns">
<ul class="usp">
<li>Over <strong>250 kvalitetsartikler</strong> hver måned</li>
<li><strong>Prisvinnende</strong> reportasjer og avsløringer</li>
<li>Premium artikler innen stoffområder som bil, båt, trening, samliv, vin og reise</li>
<li>Tilgang til <strong>hele papiravisen og Magasinet</strong> på PC/Mac, mobil og nettbrett</li>
</ul>
</div>
<div class="large-12 columns products">
<div class="row">
<div class="large-3 columns product">
<a
class="button-medium-down"
href="#PURCHASE-URL"
>
<span class="cost">39 kr</span>
<span class="name">uke</span>
<span class="name-abbreviation">uke</span>
<span class="cost-per-day">(5,00 kr per dag)</span>
<span class="subscription-discount">Ordinær pris</span>
<span class="button-large-up">
Kjøp nå
</span>
</a>
</div>
<div class="large-3 columns product">
<a
class="button-medium-down"
href="#PURCHASE-URL"
>
<span class="cost">65 kr</span>
<span class="name">måned</span>
<span class="name-abbreviation">md</span>
<span class="cost-per-day">(2,20 kr per dag)</span>
<span class="subscription-discount">Ordinær pris</span>
<span class="button-large-up">
Kjøp nå
</span>
</a>
</div>
<div class="large-3 columns product primary">
<a
class="button-medium-down"
href="#PURCHASE-URL"
>
<span class="cost">179 kr</span>
<span class="name">3-måneder</span>
<span class="name-abbreviation">3-md</span>
<span class="cost-per-day">(0,95 kr per dag)</span>
<span class="subscription-discount">Bestselger</span>
<span class="button-large-up">
Kjøp nå
</span>
</a>
</div>
<div class="large-3 columns product">
<a
class="button-medium-down"
href="#PURCHASE-URL"
>
<span class="cost">349 kr</span>
<span class="name">år</span>
<span class="name-abbreviation">år</span>
<span class="cost-per-day">(0,65 kr per dag)</span>
<span class="subscription-discount">Ordinær pris</span>
<span class="button-large-up">
Kjøp nå
</span>
</a>
</div>
</div>
</div>
<div class="large-10 large-offset-2 columns">
<ul>
<li>Ved abonnering på Dagbladet Pluss, godtar du våre <a href="">kjøps- og bruksvilkår</a>.</li>
<li><strong>Abonnementet fornyes automatisk</strong>, og løper til du sier opp</a>.</li>
<li>Abonnementet har ingen bindingstid. Du kan si det opp når som helst.</li>
</ul>
</div>
<div class="large-10 large-offset-2 columns">
<p class="text-darkgrey payment-details">
<img src="/assets/paywall/visa-mastercard-small.png" /> Betal trygt med Visa eller Mastercard.
</p>
</div>
<div class="large-12 columns text-center">
<h5>Har du allerede abonnement?</h5>
<a class="button pink outline radius" href="http://www.dagbladet.no/pluss/logg_inn/">
Logg inn
</a>
</div>
</div>