0

Below is a screenshot of my Lightning Card and the code I want the card headers to include a background color, like the "Search Details" Card and use the small icon with centered Title like the "Location" Card.
What am I missing here.

<lightning-card>
  <div class="slds-page-header">
      <div class="slds-media">
        <div class="slds-media__figure">
          <span class="slds-icon_container slds-icon-custom-custom18" title="SearchDetails">
            <lightning-icon icon-name="custom:custom18"></lightning-icon>
          </span>
        </div>
        <div class="slds-media__body">
          <div class="slds-page-header__name">
            <span class="slds-card__header-title">Search Details</span>
          </div>
        </div>
      </div>
  </div>
    <div class="slds-grid slds-wrap">
        <div class="slds-col slds-size_1-of-2">                        
            <lightning-input-field field-name="Title" onchange={handleChange}></lightning-input-field>
        </div>
        <div class="slds-col slds-size_1-of-2"> 
            <lightning-input-field field-name="Last_Known_Employer__c"></lightning-input-field>
        </div> 
    </div>
  <div class="slds-grid slds-wrap">   
      <div class="slds-col slds-size_1-of-2"> 
          <lightning-input-field field-name="EmploymentStatus__c" onchange={handleChange}></lightning-input-field>                                                                    
      </div>
      <div class="slds-col slds-size_1-of-2"> 
          <lightning-input-field field-name="JobSearchStatus__c" onchange={handleChange}></lightning-input-field>                                        
      </div>
      <div class="slds-col slds-size_1-of-1">
          <lightning-input-field field-name="InterestRationale__c" onchange={handleChange}></lightning-input-field>
          <lightning-input-field field-name="ConcurrentProcesses__c" onchange={handleChange}></lightning-input-field>                                          
      </div>
  </div>  
</lightning-card>                <div class="slds-col slds-size_1-of-2">
<lightning-card class="my-card slds-card_boundary" title="Location" icon-name="standard:location">
    <div class="slds-grid slds-wrap">
        <div class="slds-col slds-size_1-of-4">
            <lightning-button-icon icon-name="utility:edit" onclick={handleEdit} slot="actions"></lightning-button-icon>
        </div>
        <div class="slds-col slds-size_3-of-12">
            <lightning-input-field field-name="Relocation_Flexibility__c" onchange={handleChange}></lightning-input-field>                            
        </div>
        <div class="slds-col slds-size_9-of-12">
            <div class="contextMedium">
                <lightning-input-field field-name="RelocationContext__c" onchange={handleChange}></lightning-input-field>
            </div>                                
        </div>
        <div class="slds-col slds-size_3-of-12">
            <lightning-input-field field-name="Commute__c" onchange={handleChange}></lightning-input-field>
        </div>
        <div class="slds-col slds-size_9-of-12">
            <div class="contextMedium">
                <lightning-input-field field-name="CommuteContext__c" onchange={handleChange}></lightning-input-field>
            </div>
        </div>
    </div>
</lightning-card>

enter image description here

Improve this question

1 Answer 1

Reset to default
1

lightning-card tag doesn't support this level of customization.

You can use SLDS card blueprint to customize as per your requirement. Here is some psuedo code:

<article class="slds-card">
    <div class="slds-card__header slds-grid slds-page-header">
        <header class="slds-media slds-media_center slds-has-flexi-truncate">
            <div class="slds-media__figure">
                <span class="slds-icon_container slds-icon-custom-custom18" title="SearchDetails">
                    <lightning-icon icon-name="custom:custom18"></lightning-icon>
                </span>
            </div>
            <div class="slds-media__body">
                <h2 class="slds-card__header-title">
                    <a href="#" class="slds-card__header-link slds-truncate" title="Search Details">
                        <span>Search Details</span>
                    </a>
                </h2>
            </div>
        </header>
    </div>
    <div class="slds-card__body slds-card__body_inner">Card body</div>
</article>

Output: enter image description here

Improve this answer
1
  • Raul - thanks for the solution and the explanation
    – Jeff Callahan
    Jan 27 at 4:12

You must log in to answer this question.

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