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>
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

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>
<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>
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>

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>