Skip to main content
Skip table of contents

Card with icon component and cards with icon assembly

A Card with icon component is a type of content card. It's similar to a standard content card, but it has capability as a webchat button and features an icon or header instead of an image.

How to build a standard content card and a content card banner/assembly

image-20240815-112205.png

Building the Component - Card with icon

  1. Use Add Entry and select Card with icon

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

  3. Type – select Standard or Webchat, depending on whether it is being used for a webchat or not

  4. Icon – select the icon you would like to appear next to the button (e.g. ‘speech bubble’ for a webchat). Icons are optional – if you don’t select one, the title text will take its place.

  5. Title text – this is the card’s headline e.g. ‘Webchat’

  6. Sub text – this is the copy that appears underneath the headline

  7. Left align content – the content will be centred as a default, select ‘Yes’ if you want it left aligned

  8. CTA text – the copy that will appear on the CTA button

  9. Link – use ‘Add existing content’ and select the page you want to link to

  10. CTA colour – select the button colour (defaults to red)

  11. Publish the Component - Card with icon

  12. Add this to an Assembly – Cards with icon (see below)

Building the Assembly - Cards with icon

  1. In the Assembly section of your page, select Add entry and choose the Assembly - Cards with icon option

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

  3. Cards – you can add up to three Cards with icon components here. Either add an existing card component or create a new one.

  4. Publish the Assembly once the cards have been added. If you haven’t built the Assembly within a page already, you can now add it to a page.

Different types (standard or webchat; with icon or without)

Cards with icon (standard; with icon):

image-20240815-113406.png

Cards with icon (webchat; with icon):

image-20240815-113253.png

Cards with icon (standard; without icon):

image-20240815-113627.png

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.