Edit

Share via

Create and customize a card gallery in Power Pages (preview)

  • Article

[This topic is prerelease documentation and is subject to change.]

A card gallery is a data control that displays data from a table and view in cards. You can use design studio or Liquid code to add, style, and configure a card gallery in Power Pages sites.

Important

  • This is a preview feature.
  • Preview features aren’t meant for production use and may have restricted functionality. These features are available before an official release so that customers can get early access and provide feedback.

To add a card gallery with design studio:

  1. Open the design studio to edit the content and components of the site.

    Tip

    You can also add a card gallery using code.

  2. Go to the Pages workspace.

  3. Select the page you want to edit.

  4. Select the section where you want to add the card gallery.

  5. Hover over any editable canvas area, then select the Card gallery icon from the component panel.

    A screenshot of the card gallery component with the Card gallery design button displayed in the top left corner.

Choose a layout

Select the Card gallery design button to choose from any of the four available layouts.

A screenshot of the card gallery design options in design studio. The card gallery design button, located in the top left corner of the component, is emphasized and the design options display in a window in front of the component.

You can also choose from existing card galleries if they're available.

Configure your card gallery's data source

To configure your card gallery's data source:

  1. Select the Card gallery design button and choose Data.

    A screenshot of the Card gallery design options for Data in design studio.

  2. Select an existing table from the Data source lookup field.

  3. Select a corresponding view from the View dropdown.

  4. For each card gallery element (image, title, description, button, text hyperlink), choose the Select data option to bind it to a view column.

    Note

    For button and hyperlink elements, you need to configure two settings: name and url. Both configurations must be bound to a view column.

Disable the toggle switch next to any element you don't want to include.

You can rearrange each element's position by selecting the icon to the left of the toggle switch and dragging the element to the desired position.

Supported column types

Each element supports specific data types.

Element Data type(s)
Title Text (single line of text)
Phone
Whole Number
Decimal
Look up
Date only
Date and time
Description Rich Text
Text Area (multiple lines of text)
Phone
Whole Number
Decimal
Date only
Date and time
Image File - Image
Button Button label - Text (single line of text)
Button URL - URL
Text Hyperlink Text Hyperlink label: Text (single line of text)
Text Hyperlink URL: URL

You can style your card gallery by configuring style properties at the gallery, card, and element level.

Search filtering

Turn on/off the Enable search toggle to add or remove search filtering.

After you configure your card gallery, you can see the preview on canvas with sample data.

Note

You must set table permissions to allow site visitors to view and interact with your card gallery.

You can also use Liquid to edit your card gallery.

To add a new card gallery without any data binding or configuration, use the following liquid tag:

Liquid 
{% codecomponent name:Pages.CardGallery %}

To add an existing card gallery, use the Liquid tag and replace {your card gallery id} with the id for the existing card gallery:

Liquid 
{% codecomponent name:Pages.CardGallery id: '{your card gallery id}' %}