A CTA (call-to-action) can be an image or line of text and link that prompts your website visitors to take some specific action.
When to use a CTA
- If you have a set of key pages you want to highlight on a landing page.
- If you want to call attention to a specific action, such as “Register now” or “Learn more about this event.”
When to use something else
- If you have a long list of links, consider using the Related links component.
- If you don't need a lot of context and just want to link an icon with a short piece of text, consider using the Image link component.
CTA specs
- Headline: 60 characters
- Short description: 280 characters
- Full (horizontal format) image: 550 x 355 pixels
- Thumbnail image: 80 x 80 pixels
CTA options
For the CTA component, you can choose to use an image. You can also choose to have a button link, a text link or no link at all. It's best practice to use an image or headline with the CTA component.
CTA with a full image and primary button
This is a CTA headline
The images here use the "Full" Image Style. This is a short description for a CTA. This can be used to add context for what you are linking to. The link below can display as a text link or a button.
This is another CTA headline
CTAs look better side-by-side when they are matching in height, which is accomplished by using similar length headlines and short descriptions. You'll want to use the same kind of link or button style when using them next to each other.
CTA with thumbnail image and primary button
This is a CTA headline
Your short description can be just a few words, or up to 280 characters, including spaces. The thumbnail image size isn't great for images. It is better for icons.
Thumbnail image size works well with icons
Here is another short description where you can give exciting details about your event, download, program, etc. that will make them want to click the button or link.
CTA with no image and a primary button
This is a CTA headline
Keep it short if you want to.
CTA headline with no description
CTA with text link style
CTA headline field
This is a CTA example with no image.