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}>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .