Web pattern library, style and technical reference
<a href="#" class="uon-call-to-action"> <span class="i8 icons8-assistant"></span> <span class="cta-label">Got a question? Ask UON</span> </a>
<a href="#" class="uon-call-to-action popup-link"> <span class="i8 icons8-news"></span> <span class="cta-label">Sign up for updates from UON</span> </a>
The smaller CTA buttons are primarily used within sidebars.
<a href="#" class="uon-small-call-to-action"> <span class="i8 icons8-assistant"></span> <span class="cta-label">Got a question? Ask UON</span> </a>
<a href="#" class="uon-small-call-to-action popup-link"> <span class="i8 icons8-news"></span> <span class="cta-label">Sign up for updates from UON</span> </a></div>
The large CTA buttons have a slightly larger font size and support an addtional line of text.
<a href="#" class="uon-large-call-to-action">
<span class="i8 icons8-assistant"></span>
<span class="cta-label">
<strong>Got a question? Ask UON</strong>
<br/>Additional line of text
</span>
</a>
<a href="#" class="uon-large-call-to-action popup-link">
<span class="i8 icons8-news"></span>
<span class="cta-label">
<strong>Sign up for updates from UON</strong>
<br/>Additional line of text
</span>
</a>
This style can be applied using the Blue Campaign Call to Action button paint layout (asset #367095). Create a Link asset, nest it into the relevant page and apply the paint layout.
Blue campaign new Sub-line for campaign CTA tile<a target="_blank" href="#new" class="campaign-cta"> Blue campaign <strong class="hover-foil">new</strong> <span>Sub-line for campaign CTA tile</span> </a>
<a target="_blank" href="#new" class="campaign-cta alt-campaign-cta"> Blue campaign <strong class="hover-foil">new</strong> <span>Sub-line for campaign CTA tile</span> </a>
TBC.
TBC.