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
Jugbeer BholaJugbeer Bhola 

Color to entire Card

Hello, Trying to apply a color to an entire card.  Should be easy but it has not turned out to be that way.    Does anyone have suggestions?  I have attached an image of what I am trying ot accomplish.User-added image
Best Answer chosen by Jugbeer Bhola
Deepali KulshresthaDeepali Kulshrestha
Hi Jugbeer,

In order to remove the space between the title and the body, you can give the entire body in one section only.
Please refer to the following code as it may be helpful in solving your problem: 
<div class="slds-card-wrapper cardStyle">
        <article class="slds-card cardStyle">
            <div class="slds-card__header slds-grid cardStyle">
                <header class="cardStyle">
                    <div class="slds-media__body cardStyle">
                        <h2 class="slds-card__header-title cardStyle">
                            <span>Findings</span>
                        </h2>
                    </div>
            <div class="slds-card__body slds-card__body_inner cardStyle">
                <div class="slds-m-left_large">Findings Text</div>
                <div class="slds-m-left_large">Findings Text</div>
                <div class="slds-m-left_large">Findings Text</div>
                <div class="slds-m-left_large">Findings Text</div>
            </div> 
                </header>
            </div>
            <footer class="slds-card__footer"></footer>
        </article>
    </div>

.THIS .cardStyle{
    background-color:#e3e7ed;
    font-size: 13px;
}



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

Thanks and Regards,
Deepali Kulshrestha

All Answers

Deepali KulshresthaDeepali Kulshrestha
Hi Jugbeer,
In order to give color to your card, you must put your card in a container and then give the CSS class to that container. Please go through the following code as it may be helpful in resolving your problem:
 <div class="background">
    <article class="slds-card background">
        <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>
    </div>

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

Thanks and Regards,
Deepali Kulshrestha.
Jugbeer BholaJugbeer Bhola
Thank you for responding.   The example you gave was a good start.  There is an empty space between User-added image
the title and body that wont go away.  Any other ideas? 
 
  
<div class="slds-card-wrapper cardStyle">
    <article class="slds-card cardStyle">
    <div class="slds-card__header slds-grid cardStyle">
      <header class="cardStyle">               
          <div class="slds-media__body cardStyle">
                <h2 class="slds-card__header-title cardStyle">
                           <span>Findings</span>                                                                    
                </h2>
               </div>             
         </header>
         </div>
           <div class="slds-card__body slds-card__body_inner cardStyle">
                  <div class="slds-m-left_large">Findings Text</div>
                  <div class="slds-m-left_large">Findings Text</div>
                  <div class="slds-m-left_large">Findings Text</div> 
                  <div class="slds-m-left_large">Findings Text</div>
              </div> 
              <footer class="slds-card__footer"></footer>
               </article>
 </div>
  
.THIS .cardStyle{   
    background-color:#e3e7ed;   
    font-size: 13px;
}

 
Deepali KulshresthaDeepali Kulshrestha
Hi Jugbeer,

In order to remove the space between the title and the body, you can give the entire body in one section only.
Please refer to the following code as it may be helpful in solving your problem: 
<div class="slds-card-wrapper cardStyle">
        <article class="slds-card cardStyle">
            <div class="slds-card__header slds-grid cardStyle">
                <header class="cardStyle">
                    <div class="slds-media__body cardStyle">
                        <h2 class="slds-card__header-title cardStyle">
                            <span>Findings</span>
                        </h2>
                    </div>
            <div class="slds-card__body slds-card__body_inner cardStyle">
                <div class="slds-m-left_large">Findings Text</div>
                <div class="slds-m-left_large">Findings Text</div>
                <div class="slds-m-left_large">Findings Text</div>
                <div class="slds-m-left_large">Findings Text</div>
            </div> 
                </header>
            </div>
            <footer class="slds-card__footer"></footer>
        </article>
    </div>

.THIS .cardStyle{
    background-color:#e3e7ed;
    font-size: 13px;
}



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

Thanks and Regards,
Deepali Kulshrestha
This was selected as the best answer