4

Probably super easy, but struggling to change the background color of a Lighting-Card. Any Suggestions? I can get it to change in the console by manipulating element.style

HTML

<template>
    <div class="myColor">
        <lightning-card title="Opportunity Relisting" icon-name="standard:channel_program_history">
            <template if:true={opp.data}>

                <div class="slds-m-around_medium">
                    <h1>RELISTED OPPORTUNITY</h1>
                    <p>{name}</p>
                    <p>{relistStatus}</p>
                    <p>{relistDate}</p>
                </div>

            </template>
        </lightning-card>
    </div>
</template>

CSS

.myColor.THIS  {
    background: red;

}

Images

What I'm trying to get is this... enter image description here

This one is the current behavior I have... enter image description here

12
  • @martin lezer thanks for the edits.
    – thinker
    Oct 28, 2019 at 13:52
  • I do not think this is an exposed attribute for either Aura or LWC. So your solution of modifying the background via CSS is the only way. Oct 28, 2019 at 13:53
  • Thanks Bryan, can you give me a little more insight?
    – thinker
    Oct 28, 2019 at 14:00
  • When looking at the documentation developer.salesforce.com/docs/component-library/bundle/…, there is no attribute to modify the background color specifically. However, you can specify a custom CSS class like you are doing. Oct 28, 2019 at 14:18
  • 1
    Understood. You may just have to build your own card component manually using the template defined on the SLDS website (lightningdesignsystem.com/components/cards) and then add an inline style to the article element and then expose it as an attribute to modify depending upon your use case Oct 28, 2019 at 14:53

4 Answers 4

8

you can try this, it will work ! :

:host {
    --sds-c-card-color-background: #a1d6e4;
}
1
  • 1
    This worked in Salesforce. It's not working in LWC local dev server though.
    – smukov
    Sep 17, 2021 at 10:46
2

One of the ways to customise lightning-card is passing slots that are styled as you wish, for example:

                <lightning-card>
                    <header slot="title" class="slds-page-header slds-page-header_record-home">
                        GroupName 1
                    </header>
                    asdf
                </lightning-card>

enter image description here

1
  • Nope, this does not work: only part of the header has a grey background and the font is not bold. Jul 9, 2020 at 13:16
1

Bryan Anderson in the comments below should get the credit for this, so feel free to repost Bryan so I can give you the points.

You have to do a manual build of the LWC to get this feature, at least with the knowledge I have, that is what it took.

  1. https://www.lightningdesignsystem.com/components/cards/

Copy this code:

<template>
        <article class="slds-card">
    <div class="slds-card__header slds-grid">
    <header class="slds-media slds-media_center slds-has-flexi-truncate">
    <div class="slds-media__figure">
    <span class="slds-icon_container slds-icon-standard-account" title="account">
    <svg class="slds-icon slds-icon_small" aria-hidden="true">
    <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
    </svg>
    <span class="slds-assistive-text">account</span>
    </span>
    </div>
    <div class="slds-media__body">
    <h2 class="slds-card__header-title">
    <a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title="Accounts">
    <span>Accounts</span>
    </a>
    </h2>
    </div>
    <div class="slds-no-flex">
    <button class="slds-button slds-button_neutral">New</button>
    </div>
    </header>
    </div>
    <div class="slds-card__body slds-card__body_inner">Anything can go into the card body</div>
    <footer class="slds-card__footer">
    <a class="slds-card__footer-action" href="javascript:void(0);">View All
    <span class="slds-assistive-text">Accounts</span>
    </a>
    </footer>
    </article>
</template>

Then mark the 'slds-card' with the background selector and change the color in a CSS file or Inline-Style (didn't try inline but assuming it will work).

I don't like this solution but it appears to be the only way to get it to work.

0
1

If you're just setting the background colour for the card, you can use the :host pseudo class, which targets the shadow host of the shadow DOM.

In the CSS

:host {
  --slds-c-card-color-background: var(--c-example-red);
}

Find more info on "Styling Hooks"

You must log in to answer this question.

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