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>