---
schema_version: "1"
id: e2c895e5fb2cd13826e45b99d27eae545110847198af148fa7d23afddcc138d0
title: Create Custom CSS Within the Flexcard Designer (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_create_custom_css_within_the_flexcard_designer.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_create_custom_css_within_the_flexcard_designer.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 52536668c849e9f489fb8b5cc6c840a0aa19c7032eb28e070bd52af9fab0c278
description: 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.
products:
  - Omnistudio
release: "264"
---
# Create Custom CSS Within the Flexcard Designer (Managed Package)

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.

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

The custom CSS is a Salesforce attachment. When the Flexcard is saved, the attachment is updated. A `.css` file is also packaged with the generated LWC.

1. From the Flexcards tab, select the Flexcard to update.
2. In the Flexcard Designer, click an element on the canvas, and click **Style** to open the Style panel.
3. In the Flexcard Designer submenu, click the down arrow next to **Activate**, and select **Add Custom CSS**.
    
    ![FlexCards Add Custom CSS feature](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__add__custom_css__link.png)
    
    ![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
    
    Your Flexcard must be inactive to use this feature.
4. Enter your custom classes inside the code editor.
    
    ![FlexCards Add Custom CSS feature window](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__edit.png)
5. (Optional) Enable **Load as Global CSS**. These custom styles are loaded as a stylesheet in the header of the page when this feature is enabled. And when not enabled, it's loaded as internal styles inside the header of the Flexcard only.
6. Click **Save**.

What’s next: Apply custom CSS classes to elements.

- **[Flexcards 'Add Custom CSS' Properties (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_flexcardsadd_custom_cssproperties.htm&release=264.0.0&type=5)**  
    For the managed package runtime, add Custom CSS properties are configurable from the submenu of the Flexcard Designer. Create custom CSS classes and add them to supported fields in the Properties and Style panels.