Image card list

The Image card list component is used to display content as follows:

Add an image card list and items

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

  2. From the Components panel, drag and drop the PageContent > Image card list component into the Main container on the page, or click on the + icon in the Main container and select the Image 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 Image 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 an image card to it, click on Manage items > + Add new from the right-hand panel, and select ImageCardListItem.

  6. Enter a name for the item and press enter. The page will refresh and you will see the image card appear with content placeholders in it.

  7. To update the content:

    1. Click on the image placeholder and select Browse media library from the right-hand panel. Find and select the image you want to use from the media library.
    2. Click on [No text in field] under the image and enter an image caption.
  8. Repeat steps 5-7 for additional image cards you want to add into the component.  
  9. 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

Set number of cards to display per row

In Page builder, each time you add a new image card item, it will appear as a new row. To display 1, 2 or 3 cards per row:

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

  2. Click on the Number of column dropdown list, and select your desired option

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

10. Publish the page.

Delete image card items

To delete an image card item:

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

Reorder image card items

To reorder image card items:

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