---
schema_version: "1"
id: a525423478478495247d0ceb1918d02e4a3c27d4b4d25322bb80bc1b0c8b09aa
title: Add Conditional Styles to a Flexcard Element (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_add_conditional_styles_to_a_flexcard_element.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_add_conditional_styles_to_a_flexcard_element.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: f291e24fb381cff993a4baa15d2de457a62fe16ba782d6e5af259dbd8a5e2daf
description: For the managed package runtime, conditionally apply styles to a Flexcard element. Change style features such as text color, background image, and responsiveness when a condition based on the value of a data field is met. For example, add a red border around a billing Flexcard when the bill status is past due.
products:
  - Omnistudio
release: "264"
---
# Add Conditional Styles to a Flexcard Element (Managed Package)

For the managed package runtime, conditionally apply styles to a Flexcard element. Change style features such as text color, background image, and responsiveness when a condition based on the value of a data field is met. For example, add a red border around a billing Flexcard when the bill status is past due.

![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).

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d32080e46">
              <p style="margin-bottom:0;">Required Versions</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Required Versions" class="slds-cell-wrap" style="vertical-align:top;" headers="d32080e46 ">
              <p style="margin-bottom:0;">Available beginning Summer '21.</p>
            </td>

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

1. Select the element on a state in your Flexcard, and click **\+ Add Conditional Style** from the Style panel.
2. In **Conditional Style Name**, enter a unique name for the visible label for your conditional style. The name must be different than any other conditional style name on the same element.
3. To add a condition based on the value of a data field, click **\+ Add Condition**. See [Add Conditions to a Flexcard Element (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_add_conditions_to_a_flexcard_element.htm&release=264.0.0&type=5 "For the managed package runtime, display or hide data based on the value of a data field. For example, display an alert icon or supplemental text for escalated Cases. Apply conditions to any element listed in the Build panel of the Flexcard Designer.") on how to configure conditions.
4. Click **Save**.
5. Your new condition appears below the **Default**.
    
    When you add a conditional style, a **Default** section is added to the top of the Style panel. When your conditions aren’t met, the default styles apply.
    
    ![FlexCard Style panel, default conditional style](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/default_conditional_style.png)
6. (Optional) To determine what conditions are applied, hover over the tooltip "i" icon next to the conditional style name.
7. (Optional) To edit a conditional style, click its pencil (![image](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/pencil_edit_icon.png)) icon.
8. (Optional) To switch between how your element looks when the conditions are applied and not applied, select the conditional style's toggle button (![image](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/toggle_conditional_style.png)).
9. (Optional) To delete a conditional style, click its trash (![image](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/trash_icon.png)) icon.

What’s next: Preview your Flexcard. See [Preview a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_preview_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, preview your Flexcard's appearance and functionality before publishing it to a Lightning page or Experience Builder site. In Preview, test how your Flexcard looks on multiple devices and test the functionality of action links and other interactive elements.").

- **[Flexcards Conditional Style Properties (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_flexcards_conditional_style_properties.htm&release=264.0.0&type=5)**  
    For the managed package runtime, add Conditional Style properties are configurable from the Style panel in the Flexcard Designer when you select an element. Conditionally apply styles to an element depending on the value of a data field.