i want to change the background of the lightning CARD on the condition ,that when units.Available__c='NO' the card background should be red and when units.Available__c='yes' the card background should be green. Iam new to lwc and css ,i tried many methods couldn't get much about it. thanks in advance..

        <div class="myColor">
        <template for:each={Unitlist.data} for:item="units"  >
            <lightning-layout-item padding="around-small" key={units} >
                <lightning-card key={units}  >
                        <li> {units.Name},</li>
                        <li>Available: {units.Available__c} </li>
                        <div >  <lightning-button label="Quote"   onclick={handleNavigate} value={units.Id}  ></lightning-button></div>
.myColor.THIS  {
    background: red;


1 Answer 1


You need to use a combination of Styling Hooks and the JavaScript map() function to achieve what you need.

First, use Styling Hooks to create 2 CSS classes - one for each state

    --sds-c-card-color-background: green;

    --sds-c-card-color-background: red;

Next, edit your wire function to return a CSS class along with the unit data

unitData = [];
    processUnits({data, error}){
            this.unitData = data.map(unit => {
                return {
                    cssClass: (unit.Available__c === 'YES'? 'available': 'unavailable')

Finally, use the returned cssClass property in the class attribute of lightning-card.

<template for:each={unitData} for:item="unit">
    <lightning-card class={unit.cssClass}>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.