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

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):

Cards with icon (webchat; with icon):

Cards with icon (standard; without icon):

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