2

Is it possible to use the lightning-card to emulate the look of Related Lists on the Opportunity Lightning Record Page? For example... enter image description here

In my case, I don't even need the action buttons - only a header with the gray background, border around the component and bottom border for the header.

This is what I have so far but it's starting to seem like the lightning-card component is turning into the component blueprint.

<template>
  <lightning-card icon-name="standard:chart" title="My Title">
    <p>My content.</p>
  </lightning-card>
</template>

but in the Local Development Server, it displays like this: enter image description here

Issues I want to address (without going to the component blueprint) are:

  1. Vertically align the icon and "My Title" (like the Stage History example above)
  2. Have "My Title" appear with the same font-size and font-weight as "Stage History (3+)" above.
  3. Have a gray background on the header portion
  4. Have a thin border below the gray header.
  5. Have the "My content" left aligned with the icon in the header.

Do these requirements necessitate using the component blueprint or can classes or a variant be applied directly to the lighting-card?

1 Answer 1

1

Don't include all of the SLDS markup--that's the component's job, after all. All you need to worry about is the actual content. Here's an updated version of your code:

<template>
  <lightning-card icon-name="standard:data_model" title="Stage History (3+)">
  <div slot="footer">Footer Goes Here</div>
  <div for:each={items} for:var="item" key={item.key}>
    Row Content Here
  </div>
  </lightning-card>
</template>
2
  • Thanks for the reply. I updated my note above as the recommended approach didn't quite achieve the output I was hoping for. Feb 20, 2023 at 20:13
  • @nstuyvesant The default container on the Local Development Server shrinks to the content. Except for some full-width components, most components expand to take up all available space of the container. This combination of styles leads to a squished box that often looks incorrect. Try wrapping the component in a full-width div, or test it in Salesforce.
    – sfdcfox
    Feb 20, 2023 at 20:44

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .