function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Herish SurendranHerish Surendran 

How to change the background-color of the header section of lightning card in Lightning Web component

<template>
    <lightning-card>
        <h3 slot="title">
            <lightning-icon icon-name="utility:connected_apps" size="small"></lightning-icon>
            Card Title
        </h3>
        <div slot="footer">
                <lightning-badge label="Tag1"></lightning-badge>
                <lightning-badge label="Tag2"></lightning-badge>
                <lightning-badge label="Tag3"></lightning-badge>
        </div>
        <p class="slds-p-horizontal_small">Card Body (custom component)</p>
    </lightning-card>
</template>

 
AbhishekAbhishek (Salesforce Developers) 
Hi Herish,

You can try the suggestion as mentioned in the below blogs,

https://salesforce.stackexchange.com/questions/282900/change-background-color-of-lighting-card-component

https://salesforce.stackexchange.com/questions/282900/change-background-color-of-lighting-card-component

Make the code changes the suggested above.

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks.
Maharajan CMaharajan C
Hi Herish, 

As per your code you can add the css to header:

1. Add the custom class to h3 here i used the headecolor: 
  
<template>
    <lightning-card>
        <h3 slot="title" class="headercolor">
            <lightning-icon icon-name="utility:connected_apps" size="small"></lightning-icon>
            Card Title
        </h3>
        <div slot="footer">
                <lightning-badge label="Tag1"></lightning-badge>
                <lightning-badge label="Tag2"></lightning-badge>
                <lightning-badge label="Tag3"></lightning-badge>
        </div>
        <p class="slds-p-horizontal_small">Card Body (custom component)</p>
    </lightning-card>
</template>

2. Create the CSS file in your component and add the below style :
create a style sheet in the same component’s folder. The style sheet must have the same name as the component with .css format.

.headercolor{
    background: red;
} 


Thanks,
Maharajan.C