0

due to some business requirements, I need to develop a custom related-list for Contacts on the Account object. I wanted to do so with a LWC utilizing the lightning-card component. Unfortunately, I am not able to format this component to look similar to a standard related list. If you take a look at the screenshot, the grey background (like in Campaigns) and the border is missing. enter image description here

Here is the code of the component:

<template>
    <lightning-card title="Related Contacts" icon-name="standard:relationship" class="slds-card_boundary">
        <lightning-button label="New Contact" slot="actions"></lightning-button>
        <lightning-button label="Add Relationship" slot="actions"></lightning-button>

        <p class="slds-p-horizontal_small">
            <lightning-datatable
                    key-field="id"
                    data={data}
                    columns={columns}
                    onrowaction={handleRowAction}>
            </lightning-datatable>
        </p>
        <p slot="footer">Card Footer</p>
    </lightning-card>
</template>

Could you please help me with styling the component?

1

The reason you don't have the background is that in SLDS Card header does not have the background: https://www.lightningdesignsystem.com/components/cards/

The way Salesforce implements it is via Page Headers: https://www.lightningdesignsystem.com/components/page-headers/

You will have remove the title & icon-name from lightning-card and implement your own <div slot="title" class="slds-page-header">. (do not include the slds-card-header as it has extra padding).

Btw: your example renders for me with border.

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.