Design content cards content design-content-card

On this page: Design and personalize your content card’s layout, text, media, buttons, and dismiss behavior so you can deliver an engaging, on-brand message to your audience.

The authoring construct for Cards provides a form-based authoring experience that provides marketers with basic inputs that can be rendered by developers.

Once your content is defined and personalized, you can review and activate it. Your campaign will be sent according to the set schedule. Learn more on this page.

Content card layout

From the Content card layout section, choose one of the three image layout options based on your messaging requirements.

  • Small image: Displays a compact image alongside text, ideal for messages where content takes priority over visuals.

    See the Adobe Developer Documentation for iOS and for Android to learn more.

  • Large image: Features a prominent image above or beside the text, making visuals the main focus of your message.

    See the Adobe Developer Documentation for iOS and for Android to learn more.

  • Image only: Shows the image without accompanying text, perfect for visual-driven messages or standalone imagery.

    See the Adobe Developer Documentation for iOS and for Android to learn more.

Content tab content-tab

From the Content tab, you can customize your content cards by defining content and adding media and action buttons directly from this tab.

Text content title-body

To compose your message, enter your text in the Title and Body fields.

If you want to tailor your message further, use the Personalization icon to add personalized elements. For detailed instructions on how to use the personalization features, refer to this section.

Media add-media

The Media field lets you enhance your content cards by adding media, which can make your presentation more engaging for end users.

To include media, either type in the URL of the media you want to use or click the Select Assets icon to choose from assets stored in your Assets library. Learn more about asset management.

More options with advanced formatting
If the Advanced formatting mode is switched on, you can add an Alternative text for screen reading applications and another asset in the Dark Mode Media URL field.

Buttons add-buttons

Add buttons for users to interact with your content cards.

  1. Click Add button to create a new action button.

  2. Edit the button Title field to specify the label that will be displayed on the button.

  3. Select an Interact event to define what action will be triggered when users click or interact with the button.

  4. In the Target field, enter the web URL or deep link where users will be directed after interacting with the button.

Dismiss button close-button

Choose the Style for your Dismiss button to customize its appearance.

You can select from the following styles:

  • None
  • Simple
  • Circle

On Click behavior

In the Target URL field, enter the web URL or deep link that will direct users to the desired destination after they interact with your content card. This could be an external website, a specific page within your app, or any other location you want users to be taken to based on their interaction.

Data tab

Custom data custom-data

In the Custom data section, click Add Key/Value pair to include custom variables in the payload. These key/value pairs allow you to pass additional data, depending on your specific configuration. This allows you to add personalized or dynamic content, tracking information, or any other data relevant to your setup.

AI Knowledge Reference

This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.

For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.

  • TL;DR: This page explains how to design a content card’s layout, text, media, buttons, dismiss behavior, on-click behavior, and custom data using the form-based authoring experience.

Intents:

  • Choose a content card layout from the three image layout options
  • Enter Title and Body text and add personalized elements
  • Add media by URL or from the Assets library
  • Add and configure action buttons
  • Choose a style for the dismiss button
  • Define on-click behavior and pass custom data

Glossary:

  • Content card layout: Section offering three image layout options — Small image, Large image, and Image only (product-specific)
  • Small image: Displays a compact image alongside text, prioritizing content over visuals (product-specific)
  • Large image: Features a prominent image above or beside the text, making visuals the main focus (product-specific)
  • Image only: Shows the image without accompanying text (product-specific)
  • Advanced formatting mode: A mode that, when switched on, lets you add Alternative text for screen reading applications and a Dark Mode Media URL (product-specific)
  • Interact event: The setting that defines what action is triggered when users click or interact with a button (product-specific)
  • Dismiss button: The button whose Style you customize, with options None, Simple, and Circle (product-specific)
  • Custom data: A section where you add Key/Value pairs to include custom variables in the payload (product-specific)

Guardrails:

  • Alternative text and the Dark Mode Media URL field are available only when Advanced formatting mode is switched on.
  • The authoring construct provides marketers with basic inputs that can be rendered by developers.

Terminology:

  • Canonical name: Content card layout — Acronym: n/a — variants: Small image, Large image, Image only
  • Dismiss button styles: “None”, “Simple”, “Circle”
  • Do not confuse: the button Target field (destination after interacting with a button) ≠ the Target URL field in On Click behavior (destination after interacting with the content card)

FAQ:

  • Q: Which layout options are available? — Small image, Large image, and Image only.
  • Q: How do I add media to a content card? — Type in the URL of the media, or click the Select Assets icon to choose from your Assets library.
  • Q: How do I add alternative text or a dark mode image? — Switch on Advanced formatting mode, then add Alternative text and use the Dark Mode Media URL field.
  • Q: What styles are available for the dismiss button? — None, Simple, and Circle.
  • Q: How do I pass additional data with the content card? — In the Custom data section, click Add Key/Value pair to include custom variables in the payload.
recommendation-more-help
journey-optimizer-help