---
schema_version: "1"
id: a9d8c3a35e635fa5bdadc1521d95e4ceb293545857300fd8d71ceeb8a80c6749
title: Flexcards Custom Styles 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_custom_styles_properties.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_flexcards_custom_styles_properties.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: eb0049e2855c50bfb59d99bad20821bf294847c55bdc8b411d39f52a81f71f48
description: For the managed package runtime, custom Styles properties are configurable in the Style panel when you select an element in the Flexcard Designer. Save style settings on a Flexcard element as a Custom Style to use on multiple elements on a Flexcard.
products:
  - Omnistudio
release: "264"
---
# Flexcards Custom Styles Properties (Managed Package)

**For the managed package runtime, custom Styles** properties are configurable in the Style panel when you select an element in the Flexcard Designer. Save style settings on a Flexcard element as a Custom Style to use on multiple elements 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).

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

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d244648e54 ">
            <p style="margin-bottom:0;">Clear all styles configured from the Style panel including applied classes and responsiveness.</p>
          </td>

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

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d244648e54 ">
            <p style="margin-bottom:0;">Create a new Custom Style based on the current styles set.</p>
          </td>

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

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d244648e54 ">
            <p style="margin-bottom:0;">Enter the name of a new Custom Style.</p>
          </td>

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

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d244648e54 ">
            <p style="margin-bottom:0;">Removes the default style for the selected element type. For example, if the current style for a selected Action element is <kbd>Red Action</kbd>, and you click <strong class="uicontrol">Remove Default</strong>, the default style for any new Action element added to the Flexcard will not have a default style.</p>
          </td>

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

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d244648e54 ">
            <p style="margin-bottom:0;">Reset the changes to a saved Custom Style. Removes any styles applied to an element that is not part of the applied Custom Style. For example, if you add a background image to an Action element whose Custom Style is <kbd>Red Action</kbd>, clicking <strong class="uicontrol">Reset Changes</strong> removes the background image but retains any settings that are part of the <kbd>Red Action</kbd> Custom Style.</p>
          </td>

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

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d244648e54 ">
            <p style="margin-bottom:0;">Save current style settings as a Custom Style.</p>
          </td>

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

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d244648e54 ">
            <p style="margin-bottom:0;">Search from the list of saved Custom Styles.</p>
          </td>

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

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d244648e54 ">
            <p style="margin-bottom:0;">Apply a saved Custom Style to the element.</p>
          </td>

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

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d244648e54 ">
            <p style="margin-bottom:0;">Set the current Custom Style as the default for the selected element type. For example, if the current style for a selected Action element is <kbd>Red Action</kbd>, and you click <strong class="uicontrol">Set As Default</strong>, the default style for any new Action element added to the Flexcard will be <kbd>Red Action</kbd>.</p>
          </td>

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