Overview
Call-to-Action (CTA) link is a text-based link that is designed to prompt users to take a specific action, such as signing up for an event.
CTA links are visually distinct instructions to users designed to provoke an immediate response using verbs such as ‘call now’ or ‘find out more’.
Usage guidelines
CTA links are more subtle than buttons and are often used for secondary or tertiary actions on a page.
When to use it
- Use a CTA when the action is less important than a primary action that already exists on a page
- When the link is embedded in text
When not to use it
- When the link is not actionable: A CTA link should lead the user to take a specific action, such as “Sign Up” or “View all”.If the link isn’t actionable, such as a link to a related article or an external website, then it’s better to style it as a regular hyperlink
- Sometimes, a CTA link may not be necessary if the user can already take the desired action through other means, such as a form or a button or link in primary navigation. In this case, adding an additional CTA link may clutter the page and confuse the user
Default
A simple and clear link to direct users to a preferred action.
Implementation
Add class to a tag class=”qh-cta-link”
Copy to Clipboard
View all
When a CTA link appears at the end of link columns or drop down menus it uses a modified icon style for the arrow. This is so that it appears visually distinct and differentiated from other links and is not part of the proceeding list.
Implementation
- Add class to li tag class=”qh-link-cols-all-link”
- Then add class to a tag class=”qh-cta-link-view-all”
Copy to Clipboard