Cards

Display components with data in repeating cards.

Cards are a type of Repeating Group component, meaning they repeat for each record in a data source - and they let you put other components inside them.

⁠

Loading…⁠

⁠

Data Source

You can create the cards and define a data source for them using a query to external APIs or local data in the page. Each record in the data source will display a card where you can add components inside, and use card record variables to make each component dynamically show values from the data source.

⁠

Layout

Clicking the layout control will give you access to a few common card arrangements. Once selected, some of the other controls will also be changed to match the overall layout.

Grid is the most common, and allows for a neat and consistent arrangement.

Masonry is a great way to display images or text with different heights without too much empty space.

Inline is good for making horizontal sliders, or cards that are more compact and should wrap horizontally.

⁠

⁠

Variables

Anytime you’re inside a card (or any component nested inside a card) you will have access to a special group of variables with the label Card Record. This group will show you all the fields (for external data) available to be used and their values will come dynamically from the card record.

⁠

⁠

Default Fields

At the top of the variables for any data source are some default variables. Wherever possible it’s good to use these are they will not be effected when the data source changes. So you can create a block layout and copy it to another project, without having to remap all the variables.

⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.