Conditional CSS on the Flex Card Configuration

Now we can do conditional CSS on the Flexcard configuration itself.

We are trying to display a block with different border colors based on a node from the JSON:

a. Added the below custom JSON to the Flexcard data source.

b. Under the Style tab of the Block, added below stylings for the border (This will behave as Default styling, when the other conditions are not satisfied).

c. You can find a button labeled “Add Conditional Styling” on the style section.

d. Click on it and add the condition as shown below and add the border styling as well accordingly for Red.

e. Let's add the same condition and styling for Green color.

f. After configuring the conditions, the Style section will look like below.

g. Now on giving a preview, you can find the response like shown below. The border colors are displayed based on the “displayColor” node value, If the value on the node is not matching with the condition, then the Default style will be taken into consideration.