LWC lightning-card border not shown with slds-card_boundary

Question

Playground example https://developer.salesforce.com/docs/component-library/tools/playground/KLHs3GU9

I have a Lightning Web Component template with a lightning-card in an App Page.

<template>
    <lightning-card title="parent"></lightning-card>
</template>

I would like to nest more cards into it to simulate the related list look and feel from standard Lightning experience.

<template>
    <lightning-card title="parent">
        <lightning-card title="child></lightning-card>    
    </lightning-card>
</template>

This renders the child without borders, filling the entire width of the parent.

If I add the slds-card_boundary class to the child, it draws a misplaced vertical border fragment above and below the card.

However, if I add the slds-card_boundary class to the article element spawned by the child lightning-card component, the border is correctly drawn around the entire card. Adding a slds-m-around_small to article element also forces a separation between parent and child cards.

What layout concepts am I missing with Lightning Web Components to be able to successfully use lightning-card components?

In general, how can lightning-cards be used inside Lightning Web Components to achieve a related list-like appearance?

Answer 1

I've run into the same issue. It appears the styling for <lightning-card> may be broken at this time with LWC. What you can do is simply add a class onto the card and give it a style of display: block.

So in your .html file:

<lightning-card title="parent" class="my-card"></lightning-card>

And in a .css file:

.my-card {
    display: block;
}

Answer 2

Instead of using Lightning Card to achieve this, use Lightning Layout Item & write a Div tag inside it.

Then apply this Class & CSS to it - style:"border: 2px solid rgb(101, 153, 205);" & class="slds box".

Answer 3

I ran into the same problem with a nested lightning-card and given that the markup is simple went for HTML with the appropriate classes added so I could place slds-card_boundary where it is needed:

<template for:each={tagsToResources} for:item="t">
    <div key={t.tags} class="slds-card slds-card_boundary slds-m-around_medium">
        <div class="slds-card__header">
            {t.tags}
        </div>
        <div class="slds-card__body slds-card__body_inner">
            <div for:each={t.resources} for:item="r" key={r.id}>
                {r.name}
            </div>
        </div>
    </div>
</template>

I guess this is a case where the component authors haven't allowed the markup the SLDS authors expect to be created.