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.

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

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

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

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?

  • You'll probably have to roll your own - I think it's how the shadow dom kind of interferes with nested child components and their styles. – Caspar Harmer Nov 27 '19 at 18:00
  • I mean... there's not much to a card so you can just do this: developer.salesforce.com/docs/component-library/tools/… – Caspar Harmer Nov 27 '19 at 18:06
  • Sure, I can just write whatever the card spawns manually, starting from article onwards, but what’s the point in a component library if components do not work? – ipavlic Nov 27 '19 at 18:19
  • 1
    If I am getting this right, and that you need a related list experience as you see on desktop, you will need to utilize different lightning-card components here. Is this how you expect this to be rendered? – Jayant Das Nov 27 '19 at 18:34
  • @JayantDas That's very close, yes. slds-card seems wrong as it introduces additional padding, but other classes do bring it closer to the experience. Most importantly, is this sort of visual behaviour documented somewhere, or do I just go to standard interfaces and inspect to see what's going on? – ipavlic Nov 27 '19 at 18:39

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;
  • this works for me! Thanks! – Sagar Thoriya Sep 28 '20 at 11:01
  • this solved my issue, thank you – sfdxdev May 12 at 14:28

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".

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.