Image Card

Display an interactive card that includes an image, title, and description.

Image Card is an interactive card component. You can include a custom image, title, description, and donation button. When the title chevron is selected, a slide-up animation reveals the description text.

Code snippet

The Image Card component is installed on your website by placing its code snippet in the area of a page layout where you want it to appear. The code snippet is automatically generated when you create an Image Card component.

Behavior

These settings control the characteristics of Checkout when it is launched from Image Card.

  • Open campaign: Connects Image Card to a Campaign and defines the Checkout that will launch from Image Card.
  • Frequency: Defines whether a one-time or recurring frequency will be selected by default when Checkout launches. By default, the option is defaulted to match the connected Campaign’s Checkout settings.
  • Designation (if enabled): Defines the designation that will be preselected when Checkout is launched (if designations are enabled for the connected Campaign).
    • Allow donor to change designation: If selected, this option enables a donor to select a designation other than the preset designation. By default, when the Designation property is set to a value other than Match Checkout settings, the option to allow donors to change the designation is shown and selected by default.
  • Default amount: Enables you to preset the donation amount input value for Checkout. There are two configuration options for this settings:
    • Match Checkout settings: Will use the settings configured for the connected Campaign’s Checkout
    • Customize: Enables you to specify a default value that is shown in the donation amount input for Checkout.
      • Allow donor to change selected amount: This option enables a donor to change the preset donation amount value in Checkout. By default, this option is enabled.

Card

These settings control the general appearance of Image Card.

  • Image: This option lets you upload a custom image to display for Image Card.
    • Minimum resolution: 700 x 394px
    • Recommended resolution: 1,400 x 788px
  • Title: The label displayed when Image Card is in its default state. There is no character limit for this label, but we recommend using a title that is roughly 26 characters in length.
  • Content: This textarea input enables you to include a description for the Image Card. The content text is shown when the title chevron is selected. We recommend a content description length of about 166 characters.
  • Launch Checkout with this message: This option replaces the Ask Title and and Message properties in Checkout with the Title and Content defined for the Image Card.
  • Card width: Sets the width of Image Card in pixels. Range: 240-350px.
  • Card height: Sets the height of Image Card in pixels. Range: 280-400px.
  • Text color: Sets the color of the Title and Content values. We recommend maintaining a WCAG-compliant contrast between the text color and Image Card background color.
  • Background color: Sets the background color for the Title and Content areas. We recommend maintaining a WCAG-compliant contrast between the background color and foreground text color.
  • Border size: Sets the border width for the Image Card. Range: 0-4px. When the value is set to 0px, no border is shown.
  • Border radius: Sets the rounded of Image Card’s corners. Range: 0-20px.
  • Show shadow: When selected, a preset drop shadow is shown for Image Card. By default, this option is selected.

Button

These settings control the appearance of the donate button in Image Card.

  • Button text: The label used for the button.
    • Show amount on button: When selected, the donation amount set by the connected Checkout or defined in the Behavior view of Image Card will be appended to the Button text label (e.g. Donate $25).
  • Button text color: Sets the color of the Button text label. We recommend maintaining a WCAG-compliant contrast between the button text color and the button background color.
  • Button color: Sets the background color of the donation button. We recommend maintaining a WCAG-compliant contrast between the button background color and the Button text color.

Custom fields

When custom fields have been added to a selected Campaign’s Checkout, they appear as a customization option for many Elements components. This enables you to set field values that are specific to multiple components associated with the same Campaign.

Localization

These settings control how labels for Image Card are translated.

Default language

When Localization is enabled, a dropdown is shown in the settings for Image Card. The selected language will be used as the default translation when Fundraise Up is unable to auto-detect a donor’s language preferences.

Label translations

When Localization is enabled, you can select the languages you want to translate the following labels into:

  • Title
  • Content
  • Button text

Custom translations can be added for each label.

 

In this article