Card list

The Card list component is used to display content as follows:

Add a card list and card items

To add content to a page using the card list component:

  1. In Pages, navigate to the page you want to add the component to.

  2. From the Components panel, drag and drop the PageContent > Card list component into the Main container on the page, or click on the + icon in the Main container and select the Card list component from the popup window.

  3. In the Assign content item window, click once on the last (if there are multiple) data folder in the tree to select it, and click + Create new.

    Note: You may see 3 data folders in the Assign content item window.

    • First data folder: Site data. The data items in this folder are available for use on any page across your group site only.
    • Second data folder: Shared data. The data items in this folder are available for use on any page across any group site.
    • Third data folder: Local data. The data items in this folder are available for use on the current page only.

  4. Click on Card list to create a data source and type the name for the new content item without clicking on the data source itself. Press enter once you have finished typing the data source name and click Assign.

  5. The new data source will appear on the page. To add a card item to it, click on Manage items > + Add new from the right-hand panel, and select CardListItem. Enter a name for the item and press enter. The page will refresh and you will see the card item appear with content placeholders in it.

  6. To update the content:
    1. Click on the image placeholder and select Add from the right-hand panel. Find and select the image you want to use from the media library.
    2. Click on the subtitle field and enter a subtitle.
    3. Click on the title field and enter a title.
    4. Click on the link field and enter the link label and URL in the right-hand panel.
      1. For PDF attachments, additional configuration is required in Content Editor. Navigate to the page where the Card list component has been added and expand: Data > Card List > [Card Name]
      2. In the Content panel on the right-hand side, locate the Link field and click Insert media link.

      3. Browse the media library, locate the PDF you want to attach, and click Insert.

      4. Publish the item via the Publish tab: Publish > Publish item.

      5. Select all the options as per screenshot, and hit Publish.

  7. Apply any advanced styling options for this component. Advanced style options appear in the right-hand panel for each component. The table below describes the options available for this component. 

Style

Description

Themes

To apply a theme, refer to:

Is Contained

By default, the component will display full width. If you want to add padding on the left and right of the component, tick the Is Contained checkbox

Display first image on the right

The first content item will display the image on the left by default. If you want to flip the image and content (i.e. display the image on the right):

  1. In Content Editor, navigate to the data source for the component.

  2. Tick the Position image right checkbox

  3. Save your changes and switch back to the Page builder.

Variant

Title description:

 

The card list will now have options to add description for a more details card information purposes. To edit the description. Click on the placeholder text of the description area and edit.

 

        8. Publish the page.

Delete card items

To delete a card:

  1. Click on the Card list component on the page to select it.
  2. From the Card list panel on the right, expand Manage items.
  3. Hover over the card list item you want to delete and click on the 3 dots.
  4. Select Delete.
  5. Publish the page.

Reorder card items

To reorder cards:

  1. Click on the Card list component on the page to select it.
  2. From the Card list panel on the right, expand Manage items.
  3. Click and drag the card list items into the order you want them to appear on the page.
  4. Publish the page.