---
schema_version: "1"
id: 6ffce5db5a492310a4f1d8b865450a7620a1dcf0b9a59469bd8395e8f84dabc1
title: Apply Custom CSS 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_apply_custom_css_to_a_flexcard_element.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_apply_custom_css_to_a_flexcard_element.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: a6636c61e6bdfb48799807da22c85185c810a9675a547da45f9c228133e64054
description: For the managed package runtime, when the design interfaces available in the Style panel of the Flexcard Designer don't meet your design needs, apply custom CSS to your elements. Add custom CSS to edit the internal components of an element or a child element. Use this feature sparingly to optimize performance.
products:
  - Omnistudio
release: "264"
---
# Apply Custom CSS to a Flexcard Element (Managed Package)

For the managed package runtime, when the design interfaces available in the Style panel of the Flexcard Designer don't meet your design needs, apply custom CSS to your elements. Add custom CSS to edit the internal components of an element or a child element. Use this feature sparingly to optimize performance.

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

Apply classes from style sheets available to the Flexcard, such as the global SLDS and Newport style sheets. Or, apply classes that you create inside the Flexcard Designer with the **Add Custom CSS** feature. See [Create Custom CSS Within the Flexcard Designer (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_create_custom_css_within_the_flexcard_designer.htm&release=264.0.0&type=5 "For the managed package runtime, create custom CSS classes within the Flexcard Designer to apply to Flexcard elements or supported fields inside elements. Create custom CSS classes when the design interfaces in the Style panel do not meet your design needs.").

![example](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)

example

Example Grouped Datatable Element with Alternating Background Colors

You have a Datatable element that displays Account Cases grouped by case Type. You want to show alternating background colors for all rows and set a different background color for the group heading. There is no option in the Style panel for alternating row background colors. But you can enter a class for the group heading. Use the **Add Custom CSS** feature to create two classes. An alt-table-rows class for the Datatable element, and an alt-bg-group-wrapper class for the group heading.

![FlexCards Add Custom CSS feature: apply classes](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/flexcard_apply_custom_classes.png)

Apply the alt-table-rows class to the element and the alt-bg-group-wrapper class to the group heading.

1. In the Flexcard Designer, select an element on the canvas.
2. To apply a custom class to an element, click Style to open the Style panel. From the **Custom CSS** section, complete one or both of these tasks:
    
    - To append a custom class to the element's container, enter the class name in the **Container Class** field, such as branded-tables.
    - To append a custom class directly on the element, enter the class name in the **Custom Class** field, such as alt-table-rows from the example above.
3. To apply a custom class to a specific field inside an element, in the Properties panel, enter a class in a field that supports classes.
    
    For example, from the previous grouped datatable example, enter alt-bg-group-wrapper in the **Group Wrapper Class** field in the Properties panel of a Datatable element.

- **[Flexcards Custom CSS Properties (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_flexcards_custom_css_properties.htm&release=264.0.0&type=5)**  
    For the managed package runtime, custom CSS properties are configurable from the Style panel in the Flexcard Designer when you select an element. When the design interfaces in the Style panel do not meet your design needs, apply a class from any style sheet available to the Flexcard, or add inline styles.