Cards and Selection cards: content, answers and destinations
Use Cards to present content or destinations, and Selection cards to ask a question with text or image options. Selection cards save choice IDs like other choice questions.
Choose the component
| Need | Configuration |
|---|---|
| Content/destination cards | Information component: infoType="cards", with child cards using infoType="card". |
| Cards generated from data | infoType="repeatCards", using a context path or Liquid JSON-array source. |
| A single-choice answer | Choice component with isImageCards="true". Text-only cards are supported too. |
| Several answers | Selection cards with multivalue="true"; native checkboxes and Continue save an array of IDs. |
The older Media Image card is a content/link component, not a question. Preserve existing field and choice IDs when changing a question's appearance.
Layout and image settings
numCardsPerRow accepts 1–5 as strings and is the maximum desktop count; narrow screens use fewer columns. cardStyle accepts outlined, accent, raised or minimal. cardImageDisplay is crop for a consistent image area or natural to retain proportions. Content Cards can choose heading level 2, 3 or 4 using cardHeadingLevel.
Upload images through Builder or ask Darcy to create a supported static SVG asset. Use the returned verified asset references; an invented file ID will not attach an image. Mark an image decorative when it repeats its label; provide mediaAltText for an informative image. Crop originals are retained so a crop can be adjusted without losing the source.
Selection behaviour
| Interaction | Effect |
|---|---|
choiceCardInteraction="select" | Default. Native radios or checkboxes plus Continue. |
choiceCardInteraction="submit" | Single choice only. Selecting a card validates/submits the whole page and follows normal actions/navigation. |
Multiple selection always uses select and Continue. Selection cards support static items, without dynamic choices, reveals, dividers or competing presentation flags. Immediate submit does not make an answer transient or remove its requiredness; the selected ID remains the answer.
Content card destinations
For an ordinary link, use cardDestinationType="url" with cardLinkUrl. cardLinkMode chooses heading or whole-card link; cardOpenInNewTab applies to URL links.
To validate and continue to an existing service page, choose cardDestinationType="submit" and cardSubmitPageId. Optional cardSubmitParameters is Liquid returning a JSON object of scalar navigation values. They arrive as form.query and are not saved answers. Submit destinations cannot open a new tab.
Up to five secondary cardActions use the corresponding URL or submit destination. A page_submit_link expression returns complete button HTML, so it cannot be used as a card URL; use the structured submit destination.
Cards from data
repeatCardsSource chooses path or template, with repeatCardsDataPath or repeatCardsTemplate. The source must produce an array. Set repeatCardsLimit from 1–100, optional repeatCardsVisibleIf for row visibility, and repeatCardsEmptyText for no visible results.
Test images, native keyboard behaviour, long labels, validation failures, saved answers, back/change/resubmit and every destination in User view. See Choice components and Selection item settings.
Card titles and repeated-row context
Ordinary Cards need 1–50 titled child cards. Repeated Cards need exactly one titled child card as the template. Each child uses label for its title and can add cardMetaText for short supporting metadata.
In a repeated template, row is the source object, rowIdx is its zero-based index and rowNumber is its one-based number. For example, set the child title to {{ row.title }} and its content to {{ row.description }}. The default visible repeated-card limit is 12; use repeatCardsLimit to choose 1–100.