---
schema_version: "1"
id: 66dff0cf45a481006119f1373bc31cbd42053807124099287c74bf1ee85c8eec
title: Flexcards Image Properties (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_flexcards_image_properties.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_flexcards_image_properties.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: d12bf9c65913bb3c4bef2c899bacb17f9d2c07f0bdd39fef63e15fccdef28036
description: For the managed package runtime, image element properties are configurable in the Property Panel when you select an Image element in the Flexcard Designer. With the Image element, display an image on a Flexcard.
products:
  - Omnistudio
release: "264"
---
# Flexcards Image Properties (Managed Package)

For the managed package runtime, image element properties are configurable in the Property Panel when you select an Image element in the Flexcard Designer. With the Image element, display an image on a Flexcard.

![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US).

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/images/icon_note.png)

Note

Omniscripts and Flexcards support all image file types by default. If set, the lightning-file-upload `accept` attribute filters file types in the user's file browser. If set, the **Don't allow HTML uploads as attachments or document records** security setting disallows .svg image files. See [Lightning Web Component File Upload](https://developer.salesforce.com/docs/component-library/bundle/lightning-file-upload/documentation).

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
      <colgroup>
        <col>
        <col>
        <col>
      </colgroup>
      <thead class="slds-text-title_caps ">
        <tr class="">
          <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d50450e68">
            <p style="margin-bottom:0;">Property</p>
          </th>
          <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d50450e74">
            <p style="margin-bottom:0;">Description</p>
          </th>
          <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d50450e80">
            <p style="margin-bottom:0;">Reference</p>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr class="">
          <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d50450e68 ">
            <p style="margin-bottom:0;">Add Action</p>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d50450e74 ">
            <p style="margin-bottom:0;">Make the element a clickable action.</p>
          </td>

          <td data-label="Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d50450e80 ">

          </td>

        </tr>
        <tr class="">
          <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d50450e68 ">
            <p style="margin-bottom:0;">Alternative Text</p>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d50450e74 ">
            <p style="margin-bottom:0;">For accessibility, enter text describing the image, which displays when the
              image is not available.</p>
          </td>

          <td data-label="Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d50450e80 ">
            <p style="margin-bottom:0;">n/a</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d50450e68 ">
            <p style="margin-bottom:0;">Conditions</p>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d50450e74 ">
            <p style="margin-bottom:0;">Add a condition that must be met for the element to display.</p>
          </td>

          <td data-label="Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d50450e80 ">

          </td>

        </tr>
        <tr class="">
          <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d50450e68 ">
            <p style="margin-bottom:0;">Element Name</p>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d50450e74 ">
            <p style="margin-bottom:0;">The name of the element as seen on the canvas. Used to distinguish one
              element from another as you build your Flexcard in the designer. Is used
              only within the designer.</p>
          </td>

          <td data-label="Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d50450e80 ">

          </td>

        </tr>
        <tr class="">
          <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d50450e68 ">
            <p style="margin-bottom:0;">Extra Class</p>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d50450e74 ">
            <p style="margin-bottom:0;">Enter a class appended to the container of the element. Select from a class
              defined in the <strong class="uicontrol">Add Custom CSS</strong> feature of the Flexcard
              Designer or any style sheet available to the Flexcard.</p>
          </td>

          <td data-label="Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d50450e80 ">
            <p style="margin-bottom:0;">n/a</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d50450e68 ">
            <p style="margin-bottom:0;">Height</p>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d50450e74 ">
            <p style="margin-bottom:0;">Enter a value available to the <kbd>height</kbd> CSS property,
              such as <kbd>100px</kbd>, <kbd>4rem</kbd>, or a
              <kbd>calc()</kbd> function.
            </p>
          </td>

          <td data-label="Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d50450e80 ">
            <p style="margin-bottom:0;">n/a</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d50450e68 ">
            <p style="margin-bottom:0;">Image Source</p>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d50450e74 ">
            <p style="margin-bottom:0;">Enter the image source for the icon. Upload the icon here, select an image
              from your org's libraries, or enter a secure absolute URL from an external
              source.</p>
          </td>

          <td data-label="Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d50450e80 ">
            <p style="margin-bottom:0;">n/a</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d50450e68 ">
            <p style="margin-bottom:0;">Size</p>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d50450e74 ">
            <p style="margin-bottom:0;">Update the size of the image relative to the canvas size. By default,
              <strong class="uicontrol">Fit Content</strong> is selected, enabling the image to
              fill the container of the Image element.
            </p>
          </td>

          <td data-label="Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d50450e80 ">
            <p style="margin-bottom:0;">n/a</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d50450e68 ">
            <p style="margin-bottom:0;">Title Class</p>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d50450e74 ">
            <p style="margin-bottom:0;">Enter a class for the image caption.</p>
          </td>

          <td data-label="Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d50450e80 ">
            <p style="margin-bottom:0;">n/a</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d50450e68 ">
            <p style="margin-bottom:0;">Title</p>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d50450e74 ">
            <p style="margin-bottom:0;">Enter an image caption.</p>
          </td>

          <td data-label="Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d50450e80 ">
            <p style="margin-bottom:0;">n/a</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d50450e68 ">
            <p style="margin-bottom:0;">Width</p>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d50450e74 ">
            <p style="margin-bottom:0;">Enter a value available to the <code>width</code>
              CSS property, such as <kbd>100px</kbd>,
              <kbd>4rem</kbd>, or a <kbd>calc()</kbd>
              function.
            </p>
          </td>

          <td data-label="Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d50450e80 ">
            <p style="margin-bottom:0;">n/a</p>
          </td>

        </tr>
      </tbody>
    </table>