CTA with icon

A CTA with icon is a type of CTA button. It is similar to the Standard CTA, but it has capability as a webchat button and features an icon next to the button.

Building a Component – Standard CTA and Assembly – CTA (used for either a Standard CTA component or CTA with icon)

Building the Component - CTA with icon

1. Use Add Entry and select CTA with icon

2. Name – this is the system name seen in Contentful

3. Type – select Standard or Webchat. You should always select Standard unless you're building a webchat button.

4. Button text – this is the copy that will appear on the CTA button e.g. 'Sign up' or 'Join us'

5. CTA colour – select the button colour, using Shelter's established styles. When in doubt, ask the Central Digital UX team.

6. Icon – select the icon you would like to appear next to the button (e.g. ‘speech bubble’ for a webchat, or ‘calendar’ for an event).

7. Link – you can link to any page entry in Contentful or an external link component

8. Icon placement – select which side of the button the icon should be positioned

9. Button size – defaults to ‘Regular’ but you have the option to make it smaller

10. Publish the Component - CTA with icon

11. Add the component to an Assembly - CTA

Any questions? Email Lindsay Foley in the Central Digital team.