---
schema_version: "1"
id: 9532690918a2a743edcb5da1dd3c93bb09736c4c42b9a6452a1cb0774ea981d1
title: Add Elements to a Flexcard
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_add_elements_to_a_flexcard_25561.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_add_elements_to_a_flexcard_25561.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: c4979b9ce655f6b8b071a0aecc7e1b0b8da307f6bc656e0262b7453e46794e5b
description: Build your card by dragging elements into a state on the canvas. Add data fields, display, and input elements to your Flexcard. Show data generated dynamically from the Flexcard’s data source, or add static information. Rearrange, clone, delete, and adjust the widths of your elements as needed. Style an element and configure its properties in the Flexcard designer.
products:
  - Omnistudio
release: "264"
---
# Add Elements to a Flexcard

Build your card by dragging elements into a state on the canvas. Add data fields, display, and input elements to your Flexcard. Show data generated dynamically from the Flexcard’s data source, or add static information. Rearrange, clone, delete, and adjust the widths of your elements as needed. Style an element and configure its properties in the Flexcard designer.

1. From the App Launcher, find and select **Flexcards**.
2. Expand a Flexcard and select a version.
3. If needed, deactivate the Flexcard for editing the Flexcard.
4. To add an element to a Flexcard:
    
    - From the elements panel, drag an element from the Elements panel to the canvas.
    - In the designer for a managed package, drag an element from the **Build** tab.
    
    - Fields: Display data fields generated from the Flexcard's data source. For example, display policy information for an account.
    - Display: Add elements that show information, execute actions, or send data. For example, for a customer service portal, include the priority of a case, a button to close a case, or a banner to navigate to your company website.
    - Inputs: Add elements where users enter or select information from the defined values that you provide. For example, your portal users can enter their phone number, or select a date for an appointment.
5. Select an element on the canvas, and then add or update its properties:
    
    - To open the property panel, click ![Properties panel icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio-264-0-0-production-enus/f526eaa8-ae05-487a-8944-4bb99b0b78ac/omnistudio/images/properties_panel_252_designer.png).
    - In the designer for a managed package, click the **Properties** tab.
    
    In the properties panel, specify the element’s characteristics such as the name, the size, or [show conditions](https://help.salesforce.com/s/articleView?id=xcloud.os_add_conditions_to_a_flexcard_element_35370.htm&release=264.0.0&type=5 "Apply conditions to Flexcards elements to show only relevant information to your users based on data field values. For example, on a Flexcard that summarizes the terms of a contract, only show reminder text when the contract renewal date is within a defined range.")
6. On the Style tab, specify the element’s look and feel, such as the alignment, the color, or [apply a custom style](https://help.salesforce.com/s/articleView?id=xcloud.os_style_flexcard_elements_38751.htm&release=264.0.0&type=5 "Configure the look and feel of a Flexcard by styling individual elements, fields inside elements, and entire states. Configure backgrounds, text, and borders; adjust dimensions and element spacing; apply classes and inline styles; make your element responsive; and more.").

- **[Flexcards Display Elements](https://help.salesforce.com/s/articleView?id=xcloud.os_flexcards_display_elements_reference_28421.htm&release=264.0.0&type=5)**  
    Show relevant information to your users by adding display elements to Flexcards such as data fields, actions, states, data tables, and more. While we provide info bubbles for most element properties directly in the app, some elements are more complex to set up, such as custom Lightning web components. Review the considerations and requirements for those elements.
- **[Flexcards Input Elements](https://help.salesforce.com/s/articleView?id=xcloud.os_flexcards_input_elements_reference_31222.htm&release=264.0.0&type=5)**  
    Add input elements to Flexcards so that your users can provide data, which then updates the JSON data. You can also configure an element to run an action when a user interacts with the element.