3

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 '19 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. – Bryan Anderson Oct 28 '19 at 13:53
  • Thanks Bryan, can you give me a little more insight? – thinker Oct 28 '19 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. – Bryan Anderson Oct 28 '19 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 – Bryan Anderson Oct 28 '19 at 14:53
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. – Sander de Jong Jul 9 '20 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

you can try this, it will work ! :

:host {
    --sds-c-card-color-background: #a1d6e4;
}

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.