Styleguide 0.30.11

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>