# Flexcard styling, conditional styles and themes

*Omnistudio Developer Study Guide · Flexcards · Last updated October 27, 2026 · https://www.certifyforce.com/study-guide/omnistudio-developer/flexcards/flexcard-styling-conditional-styles-and-themes*

How to configure Flexcard appearance in the designer: Style tab settings and saved styles, conditional styles, 12-column widths and responsive sliders, custom CSS classes and where each class name goes, SLDS or Newport overrides through a static resource, and why a theme change needs a clone.

- Certification: Salesforce Omnistudio Developer
- Exam section: Flexcards
- Study guide: https://www.certifyforce.com/study-guide/omnistudio-developer

**Official exam objective:**

> Customize Flexcard appearance using styling or themes.

## What the exam expects

- Configure an element's Style tab, saved custom styles, and conditional styles driven by a data field's value.
- Set element widths on the 12-column grid and make an element responsive with a width per viewport; know the state-element sizing restriction.
- Write classes with Add Custom CSS, decide on Load as Global CSS, and enter class names in the right field, knowing inline styles win.
- Overwrite global SLDS or Newport styles with a zipped static resource named in Styling Options.
- Change a card's theme the supported way: clone it under a new name.

Key terms: **conditional style** (a named style set with a condition, plus a Default section), **custom class** (a CSS class name entered on an element), **Load as Global CSS** (loads custom CSS in the page header, not the card header), **Styling Options** (Setup panel field naming a static resource of styles), **theme** (the design system a card is created with, such as Newport).

## Key facts

| Fact | Detail | Source |
|---|---|---|
| Width unit | 1 to 12 parts of a 12-column grid; 6 = 50% | [Style a Flexcard](https://help.salesforce.com/s/articleView?id=xcloud.os_style_flexcard_elements_38751.htm&language=en_US&type=5) |
| Responsive default | The smallest viewport breakpoint's width becomes the default | [Style a Flexcard](https://help.salesforce.com/s/articleView?id=xcloud.os_style_flexcard_elements_38751.htm&language=en_US&type=5) |
| State sizing | Only on a child card, only with the slider | [Style a Flexcard](https://help.salesforce.com/s/articleView?id=xcloud.os_style_flexcard_elements_38751.htm&language=en_US&type=5) |
| Conditional style names | Unique per element; a Default section holds the unmet-condition styles | [Style a Flexcard](https://help.salesforce.com/s/articleView?id=xcloud.os_style_flexcard_elements_38751.htm&language=en_US&type=5) |
| Precedence | Inline Style tab styles override container and element classes | [Style a Flexcard](https://help.salesforce.com/s/articleView?id=xcloud.os_style_flexcard_elements_38751.htm&language=en_US&type=5) |
| Custom CSS storage | Attachment on each save; CSS file added to the LWC package on activation | [Style a Flexcard](https://help.salesforce.com/s/articleView?id=xcloud.os_style_flexcard_elements_38751.htm&language=en_US&type=5) |
| Width listener | Adds a dynamic class and re-renders on browser resize | [Configure Flexcard Settings](https://help.salesforce.com/s/articleView?id=xcloud.os_set_up_a_flexcard_in_the_flexcard_designer_37646.htm&language=en_US&type=5) |
| Theme change | Only by cloning and renaming | [Create a Flexcard](https://help.salesforce.com/s/articleView?id=xcloud.os_create_a_flexcard_25432.htm&language=en_US&type=5) |
| Active versions | One at a time; name and author stay the same | [Clone or New Version](https://help.salesforce.com/s/articleView?id=xcloud.os_flexcards_versioning_and_cloning_42243.htm&language=en_US&type=5) |

## Check yourself

- Why does a Style tab background win over a custom class that sets a different background?
- Why does Help warn against targeting DOM elements in components you don't own with custom CSS?
- When is a custom class available to elements, and when does the CSS file join the component package?
- Why can't a new version give an active card a different theme?

## Sources

- [Style a Flexcard](https://help.salesforce.com/s/articleView?id=xcloud.os_style_flexcard_elements_38751.htm&language=en_US&type=5)
- [Create a Flexcard](https://help.salesforce.com/s/articleView?id=xcloud.os_create_a_flexcard_25432.htm&language=en_US&type=5)
- [Clone a Flexcard or Create a New Version](https://help.salesforce.com/s/articleView?id=xcloud.os_flexcards_versioning_and_cloning_42243.htm&language=en_US&type=5)
- [Configure Flexcard Settings](https://help.salesforce.com/s/articleView?id=xcloud.os_set_up_a_flexcard_in_the_flexcard_designer_37646.htm&language=en_US&type=5)
- [Set Up Conditions to a Flexcard Element](https://help.salesforce.com/s/articleView?id=sf.os_add_conditions_to_a_flexcard_element_35370.htm&language=en_US&type=5)
- [Apply Global Branding to Flexcards with the Newport Design System (Managed Package)](https://help.salesforce.com/s/articleView?id=sf.os_apply_global_branding_to_flexcards_with_the_newport_design_system.htm&language=en_US&type=5)

## About the full unit

The "Core concepts", "Exam traps" and "Worked scenario" sections of this unit, its 7 linked practice questions, and unlimited timed mock exams are included with the Omnistudio Developer pack (USD $19): https://www.certifyforce.com/practice-exams