---
schema_version: "1"
id: 788f1ca1b12c000323d3f5814ba783911cbf0047d7709c3e3ff73a82edd0d254
title: Understand Flexcards
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_flexcardsbasics_8118.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_flexcardsbasics_8118.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: df12e3077cb00f6ea854f897acc295807de66e8e3b9e0089f9740572878d6444
description: Flexcards provide tools for building customer-centric, industry-specific UI components and applications on the Salesforce platform. Flexcards are rich in information and actions relevant to the customer's context. Create your Flexcards in a declarative design tool and add them to your Lightning or Experience Cloud pages.
products:
  - Omnistudio
release: "264"
---
# Understand Flexcards

Flexcards provide tools for building customer-centric, industry-specific UI components and applications on the Salesforce platform. Flexcards are rich in information and actions relevant to the customer's context. Create your Flexcards in a declarative design tool and add them to your Lightning or Experience Cloud pages.

## Customer Context

Each customer is linked to multiple aspects of your company's products and services. Customers have accounts, preferred methods to receive bills, preferred means of contact, and a history of the products they have purchased as well as their interactions with the company. When agents must use different systems to gather contextual information about the customer, it affects customer service. Use Flexcards to streamline customer engagement.

## Designer

The Flexcard designer is a declarative tool to create UI components. Build dynamic customer-centric UIs without code from a drag interface with [WYSIWYG](https://en.wikipedia.org/wiki/WYSIWYG) editing. See [Omnistudio Flexcards](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_flexcards_24388.htm&release=264.0.0&type=5 "Build industry-specific UI components and applications on the Salesforce platform by creating Omnistudio Flexcards in a visual editor. Show Salesforce object information with clickable actions that adapt to the context and type of data, helping your team handle tasks more efficiently. Flexcards are built with the Lightning Component framework.").

## Flexcards

A Flexcard is a block that contains a combination of pertinent information and links to processes within a specific context. For example, an account card can include unique account information, such as:

- Status
- Priority or service level agreement
- Creation date

Actions on an account card might include:

- Closing a case
- Opening a new case
- Creating a new task

In the Flexcard Designer, you can create an action that launches or updates an Omniscript, navigates to a web page or application, displays a flyout, fires an event, update field values, and more. See [Set Up Actions on a Flexcard](https://help.salesforce.com/s/articleView?id=xcloud.os_add_an_action_to_a_flexcard_25672.htm&release=264.0.0&type=5 "Configure actions that users can complete on Flexcards to improve the self-service experience, and save time on manual tasks. Add actions to supported elements or add an action element to a Flexcard, and then configure the action settings. For example, you want to have a button that opens a URL for additional information. To do so, add an action to an existing image or add an action element for which you select an image. You can also set up sequential actions and configure each action’s trigger.").

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio-264-0-0-production-enus/f526eaa8-ae05-487a-8944-4bb99b0b78ac/images/icon_note.png)

Note

The generated Flexcard is a Lightning Web Component. Based on the business logic, some users modify the generated Flexcard.

## Design and Layout

Style individual elements or add custom CSS directly on an element within the Flexcard Designer. You can also make elements responsive. See [Style a Flexcard](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.").

## Data Sources

Select from multiple data source options to retrieve data to display on your Flexcards. For a list of data sources available in the Flexcard Designer, see [Set Up a Data Source on a Flexcard](https://help.salesforce.com/s/articleView?id=xcloud.os_configure_a_data_source_on_a_flexcard_35864.htm&release=264.0.0&type=5 "Configure how to retrieve the data that a Flexcard shows. Pull it directly from Salesforce objects with Omnistudio Data Mappers, Salesforce Object Query Language (SOQL) queries, and Salesforce Object Search Language (SOSL) searches. You can also use an external source with REST methods. For complex business processes, use the Apex remote method or Integration Procedures. If needed, set different data sources for the child and parent Flexcards. Then, choose where to publish the Flexcard.").