CTAs

How we move from one page to another, to get the content we want to view is very important. These call to actions or CTAs will appear in the form of a button or a link.

For information about buttons used with forms, please visit the section within the forms page.

HERO BUTTON

The clean and stark white button is typically reserved for hero images only, and occasionally larger features or campaigns.

If we are using a background image, the actual link or click-through will be the entire content of the block, not just the text link.

<span class="text-sg-gold px-4 py-2 bg-white text-md md:text-lg tracking-wider">
	Shop Now
</span>

LINKS vs. BUTTONS

Typically found within the homepage or within a key landing page such as Ladies, Gift Guide or a seasonal campaign such as Valentines - we use larger CTAs for impact.

We use text links <a href="">SHOP NOW</a> more commonly than buttons <button class="">SHOP NOW</button> or links with button styles. This is because isolated text is a recognisable style and trait of Fairfax & Favor.

ICONS vs. COLOUR

It's important the visitor knows how to navigate, that it's clear a link is a click-through. Where placed on a pure white background, we may use the signature brand gold to identify a link, this should always be with uppercase and letter-spacing.

<a href="" class="text-sg-gold text-lg uppercase tracking-wider">
	Gold Product Link
</a>

Where we have the signature brand navy background, or an image as a background, we'll use pure white for a link. To ensure it's clear this is a click-through to the visitor, we append a right facing chevron after the text.

Similarly to the hero button, if we are using a background image, the actual link or click-through will be the entire content of the block, not just the text link.

<a href="" class="text-white uppercase tracking-wider">
	Shop Now <i class="fa fa-angle-right"></i>
</a>

<span class="text-sg-gold text-lg uppercase tracking-wider">
	Shop Now <i class="fa fa-angle-right"></i>
</span>

THE MOST IMPORTANT BUTTON

The checkout button is the single most important button in any online shop, it finalises the sale, satisfying the aim of any retail business. This button size is unique, used once only within the site and just for this purpose.

LESS IMPORTANT BUTTON

For instances where space is a premium or a button has less importance, we use a small typeface and less padding. However, this condensed version still includes the distinctive uppercase and letter-spaced text with pure white background and 1 pixel outline.

<a href="" class="border border-sg-gold text-sg-gold text-sm py-1 px-2 uppercase">
	Add Gift Wrapping for £10
</a>