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.
Customize Flexcard appearance using styling or themes.
~8 min read · 7 practice questions ·
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
- Detail
- 1 to 12 parts of a 12-column grid; 6 = 50%
- Detail
- The smallest viewport breakpoint's width becomes the default
- Detail
- Only on a child card, only with the slider
- Detail
- Unique per element; a Default section holds the unmet-condition styles
- Detail
- Inline Style tab styles override container and element classes
- Detail
- Attachment on each save; CSS file added to the LWC package on activation
- Detail
- Adds a dynamic class and re-renders on browser resize
- Detail
- Only by cloning and renaming
- Detail
- One at a time; name and author stay the same
- 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?
The questions are free to read. Answers with their sources and self-grading are included with the pack.
Keep reading with the Omnistudio Developer pack
- Core concepts
- Exam traps
- Worked scenario
The pack includes:
- All 46 lessons of the Omnistudio Developer guide, with reading progress
- Interactive decision walks and step-by-step sequence steppers
- Inline practice questions and one-click topic practice (7 questions for this lesson)
- An official source cited for every claim
- An AI tutor that answers from the guide
- Unlimited timed practice exams