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?
Best Answer
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 ofdisplay: block
.So in your .html file:
And in a .css file: