CTA bar
A CTA bar strip featured at the top of a landing page that can display up to three key call-to-actions.
CTA bar example
When to use a CTA bar
The CTA (call-to-action) bar is used for highlighting important links on a landing page. It is only suitable for high level pages and not pages further down in the content tree.
If you want to add links to the top of a page further down in the tree, you can use Quick links instead.
Key features and behaviour
- The CTA bar can display between one and three buttons, left to right.
- You can use the CTA bar to link to internal or external pages.
- The component can be made 'sticky' so that it follows the user down the page as they scroll. This can be done in Experience Editor.
How to use a CTA bar
Recommended word count
The CTA buttons should have short link text to fit the limited space available. The link text can run over one or two lines, but should not exceed this. It's important to check how the CTA bar appears on mobile too to ensure the link text is short enough.
|
Link text |
10–30 characters max |
Notes on component usage
- When adding links to a CTA bar, make sure that they are ordered in a logical way. The buttons will always display in yellow, white and grey to indicate a visual hierarchy, meaning that the first link should be the most important call-to-action to catch a user's attention.
- In sitecore, CTA bar link One will appear on the left and so on.