Breadcrumbs

CTA assembly and Standard CTA component

To build call-to-action messages that give our users a way to take action, we have the Standard CTA component and the CTA assembly. You can use the component by itself as a button, or within the assembly to create a unit of lead-in text and button.

We also have an option to create a CTA with an icon.

Consider the end product

Before you build your CTA content, think about your options for displaying it on a page:

  • On desktop you can display it in our standard column width:

    image-20240822-085839.png


  • Or display it at full page width in a content page set to 100% width:

    image-20240822-084842.png


  • You can display it in a sidebar

  • You can display only the component as a stand-alone button:

image-20240822-091423.png

  • You can place it in either side of a two column block:

image-20240822-092322.png


  • And you have a range of colour options

Creating a Standard CTA component

  1. Use Add entry and select Component - Standard CTA

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

  3. Button text - you can have up to 256 characters but the best CTAs are succinct

  4. CTA colour - select the colour for your button, using Shelter's established styles. When in doubt, ask the Central Digital UX team.

    1. Only choose ‘Secondary on dark' if you'll use the button inside a CTA assembly with a dark background

    2. Primary (red) is mainly used for our donate buttons


image-20240822-092923.png
Primary (red) is for the main CTA button on a page
image-20240822-093413.png
Secondary standard (black)


image-20240822-093547.png
Secondary outline (black outline)
image-20240822-093956.png
Secondary on dark (white outline on dark background)


  1. Link - you can link to any page entry in Contentful or an external link component

  2. Button size - this defaults to a standard size, with options to make the CTA button larger or smaller

  3. Publish your component

Create a CTA assembly

  1. Use Add entry to select Assembly - CTA

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

  3. CTA header - enter the text to display above the button

  4. Banner colour - select black or transparent (red and blue are no longer in use following rebrand)

  5. CTA - use Link existing entry to find and add the Standard CTA component you've built

  6. Remove margin button - select Yes if you don't want a 40 pixel white gap between the assembly and the content below it

  7. Publish your assembly. It's now ready to be added to pages.


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