Skip to main content
Skip table of contents

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)

image-20240822-111634.png

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.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.