Messaging

Messaging should always look like these through a combination of the modifier classes detailed below. Messaging do not come with any margins attached to them in order to make them more flexible in where they can be used.

Promotional Messaging

Match an Athlete Vest. Save £20 
<div class="pl-messaging pl-messaging--promotional">
    <span class="pl-messaging__text">Match an <a href="javascript:void(0);" class="pl-messaging__link">Athlete Vest</a>. Save £20</span>
</div>

With icon

Buy 3 pairs for £35 
<div class="pl-messaging pl-messaging--promotional">
    <span class="pl-messaging__text">Buy 3 pairs for £35 <i class="icon icon-tick"></i></span>
</div>

With clickable icon

Buy 3 pairs for £35 
<div class="pl-messaging pl-messaging--promotional">
    <span class="pl-messaging__text">
        Buy 3 pairs for £35 
        <a href="javascript:void(0);" class="pl-messaging__delete-link">
            <i class="icon icon-remove-dark-green"></i> 
        </a>
    </span>
</div>

Accent

Spend £35 more to get free UK next day delivery 
<div class="pl-messaging pl-messaging--promotional-accent"> 
    <span class="pl-messaging__text">Spend £35 more to get free UK next day delivery</span>
</div>

Accent clickable

Clickable promotional messaging 
<a href="javascript:void(0);" class="pl-messaging pl-messaging--promotional-accent">
    <span class="pl-messaging__text">Clickable promotional messaging</span>
</a>

Neutral

30% OFF Summer Essentials 
<div class="pl-messaging pl-messaging--promotional-neutral"> 
    <span class="pl-messaging__text">30% OFF Summer Essentials</span>
</div>

Neutral clickable

Clickable promotional messaging 
<a href="javascript:void(0);" class="pl-messaging pl-messaging--promotional-neutral">
    <span class="pl-messaging__text">Clickable promotional messaging</span>
</a>

Outlined

Use a Promo Code 
<div class="pl-messaging pl-messaging--promotional-outline">
    <span class="pl-messaging__text">
        <a href="javascript:void(0);" class="pl-messaging__link-block">Use a Promo Code</a>
    </span>
</div>

Service Messaging

This service messaging is mainly used for the flyout basket

We are moving to a our new warehouse. Please allow 5-7 days for your delivery to arrive. Read more 
<div class="pl-messaging pl-messaging--service-primary">
    <span class="pl-messaging__text">We are moving to a our new warehouse. Please allow 5-7 days for your delivery to arrive. Read <a href="javascript:void(0);" class="pl-messaging__link">more</a></span> 
</div>

Service Messaging Secondary

Free delivery on all orders. 
<div class="pl-messaging pl-messaging--service-secondary">
    <span class="pl-messaging__text">
        <a href="javascript:void(0);" class="pl-messaging__link">Free delivery on all orders.</a>
    </span>
</div>

Service Messaging Accent

Free delivery on all orders. Read more 
<div class="pl-messaging pl-messaging--service-accent">
    <span class="pl-messaging__text">Free delivery on all orders. <a href="javascript:void(0);" class="pl-messaging__link">Read more</a></span>
</div>

Stripe Messaging

By default it will show 1 message only. You can use the class modifier .pl-messaging--stripe-2-col and .pl-messaging--stripe-3-col to make up to 3 messages visible. Use -md, -lg, -xl or -xxl to target tablet or desktop view.

  • Medium: 640px -md
  • Large: 1024px -lg
  • XLarge: 1200px -xl
Message Link 
<div class="pl-messaging pl-messaging--stripe-primary">
    <div class="pl-messaging__stripe-item">
        <a href="javascript:void(0);" class="pl-messaging__stripe-link">
            <span class="pl-messaging__text">Message Link</span>
        </a>
    </div>
</div>
Message Link 1
Message Link 2
Message Link 3 
<div class="pl-messaging pl-messaging--stripe-primary pl-messaging--stripe-2-col-md pl-messaging--stripe-3-col-lg">
    <div class="pl-messaging__stripe-item">
        <a href="javascript:void(0);" class="pl-messaging__stripe-link">
            <span class="pl-messaging__text">Message Link 1</span>
        </a>
    </div>
    <div class="pl-messaging__stripe-item">
        <a href="javascript:void(0);" class="pl-messaging__stripe-link">
            <span class="pl-messaging__text">Message Link 2</span>
        </a>
    </div>
    <div class="pl-messaging__stripe-item">
        <a href="javascript:void(0);" class="pl-messaging__stripe-link">
            <span class="pl-messaging__text">Message Link 3</span>
        </a>
    </div>
</div>
No Link Message 
<div class="pl-messaging pl-messaging--stripe-primary">
    <div class="pl-messaging__stripe-item">
        <span class="pl-messaging__text">No Link Message</span>
    </div>
</div>

Stripe Messaging Secondary

Link Message 
<div class="pl-messaging pl-messaging--stripe-secondary">
    <div class="pl-messaging__stripe-item">
        <a href="javascript:void(0);" class="pl-messaging__stripe-link">
            <span class="pl-messaging__text">Hello World</span>
        </a>
    </div>
</div>
Link Message 1
Link Message 2 
<div class="pl-messaging pl-messaging--stripe-secondary pl-messaging--stripe-2-col-md">
    <div class="pl-messaging__stripe-item">
        <a href="javascript:void(0);" class="pl-messaging__stripe-link">
            <span class="pl-messaging__text">Link Message 1</span>
        </a>
    </div>
    <div class="pl-messaging__stripe-item">
        <a href="javascript:void(0);" class="pl-messaging__stripe-link">
            <span class="pl-messaging__text">Link Message 2</span>
        </a>
    </div>
</div>

Error Messaging

Quantity no longer available. Shop now 
<div class="pl-messaging pl-messaging--error-primary">
    <span class="pl-messaging__text">Quantity no longer available. <a href="javascript:void(0);" class="pl-messaging__link">Shop now</a></span>
</div>
Quantity no longer available. Shop now 
<div class="pl-messaging pl-messaging--error-secondary">
    <span class="pl-messaging__text">Quantity no longer available. <a href="javascript:void(0);" class="pl-messaging__link">Shop now</a></span>
</div>