Card Listing Paragraph Block

This article goes into detail on how to create a Card Listings

CMS Support

April 21, 2023
minute read time
Card Listings

How to Add a Card Listing Paragraph Reference:

Card listing paragraphs let editors display/sort information in a new way. 

Card listing paragraphs are useful when you have to list information in a more interactive way. Click here for more information about Listing nodes.  

STEPS:

  1. Select Add Paragraph Reference in Layout Builder. 
  2. (optional) Enter any Block Heading as desired. 
    1. (Click here for more information about Block heading options)
  3. Select Add Listing from the Configure Block page. 
  4. Select ‘A Card Listing' for Listing Type
    1. Click here for more listing options. 
  5. Select the amount of columns from the first dropdown menu. The options currently available are 2 and 3 columns. 
  6. Select the Card Type Standard Cards display basic information on the front while a Flip Card can have additional information added onto the back. 
  7. Add Card Title
  8. Select 'Card Icon' to add an icon onto the card. 
    1. See a list of available icons
    2. Please note solid style icons are currently unavailable
  9. Optional: Add Card Image to use an image instead of an icon
  10. Card Link Text For standard cards this field will refer to the node you are linking. 
    1. Note:For Flippy cards this field is referring to the information on the back of the card, i.e "Flip Card for more Info."
  11. Optional: For Standard Cards, add Card Link URL for the Card Link Text's link
  12. Optional: For Flippy Cards, add Card Flip Side Content for the back of the card.
  13. Select 'Add Card' to add more cards to the list.
  14. Select ‘Add Block’ to finish adding the Paragraph. 

Standard Cards

Standard Card
Cards Can Have no Icons
Family walking along creek bed
Standard Card with an Image Instead of an Icon

Flippy Cards

Flippy Card

New way to display information. 

flippy
Flippy Card

New way to display information. 

Any Questions, Comments, or Requests?

Contact us at [email protected]