Use cards to link to content

Tips on how you can use the Card component and a demonstration on how to create a Card with no image which links to a page on your website.

Card component examples

The Card component has two style options, Card with image and Card with no image.

Demonstration video

In this demonstration video we:

• create a new fictional Latin program page and add some content
  
• publish the new page live
• navigate to the Languages page (one level up in the page hierarchy)
  
• edit the page and add a 50%/50% column control
  
• add the Card component within the column control
  
• edit the fields for Card with no image and link to the new Latin program page
• publish the page with the Card live.
  

Now you try

1. If you have an existing published page on your website you wish to link to from the card, you can proceed to Step 4.
2. Create a new page.
3. Publish the page.
4. Under Sites, navigate to the page you wish to Edit and place the card on.
   
5. Consider if you wish to place the card inside a column control.
6. Add the Card component.
7. Click on Configure and do the following:
   1. Select style for the card. In the video we chose Card with no image.
   2. Enter a Title (mandatory).
   3. Add a Label to display as a tag (not mandatory).
   4. Enter a Description (not mandatory).
   5. In the Link field (mandatory), click on the Browse icon to the right, select the path and page you wish to link to, then click the tick icon to Confirm the page selection.
   6. In the Call to action button text field (not mandatory), if you leave it blank it will default to display Read more, otherwise you can enter your own custom text (maximum 30 characters).
   7. Click on Done (tick icon).
8. Publish the page.
   Note: If you were to Preview the page, the Card's button link will appear to not work therefore we ask that you Publish the page and check it functions on the live page.
    

Some ideas to inspire you