Skip to main content

Lightning Card in LWC

Lightning Card in LWC

Learn how to use lightning-card in Lightning Web Components (LWC) to create structured, visually appealing containers for your Salesforce UI.

1. Introduction

lightning-card is a UI component that provides a container for displaying content in a card format. It’s part of the Salesforce Lightning Design System (SLDS) and enhances the visual presentation of components while maintaining consistency with the Salesforce UI.

Key Features of lightning-card:
• Title: Displays a title for the card.
• Body: Contains the main content of the card.
• Actions: Optional slot for adding buttons or interactive elements.
• Footer: Optional section for additional information or links.
• Icon: Can include an icon in the header.

Lightning Card Introduction

2. Basic Lightning Card

The simplest form of a Lightning Card provides a clean layout for displaying information.

<lightning-card title="Basic Card">
  <p>This is a basic Lightning Card. You can add any content here!</p>
</lightning-card>

• <lightning-card>: A base component provided by Salesforce for creating card-style containers.
• title: Defines the main heading of the card.

Basic Lightning Card Example

3. Lightning Card with Customized Title

The title attribute in <lightning-card> does not support custom styling (e.g., colors, bold text). To customize the header, use the slot attribute and pass the title as a slot. 

<template>
  <lightning-card>
    <h3 slot="title" class="t">Card Title</h3>
    <p>Lightning card with custom title</p>
  </lightning-card>
</template>

.t {
  color: brown;
}
Customized Lightning Card Title

4. Card with Icon

Enhance your card with an icon for better visual representation. lightning-card displays an SLDS icon when you use the icon-name attribute. 

<lightning-card title="Card with Icon" icon-name="standard:account">
  <p>This card has an icon to represent its purpose.</p>
</lightning-card>
Card with Icon Example

5. Card with Footer

Footers provide additional context or actions related to card content. The footer is optional and can contain actions such as navigation links. 

<template>
  <lightning-card title="Card with Footer" icon-name="standard:account">
    <p>This card features a footer for extra information.</p>
    <div slot="footer">
      <p>This is footer of the Card</p>
    </div>
  </lightning-card>
</template>
Card with Footer Example

6. Card with Actions

Use the actions slot to include buttons or icons for interactions. Actions appear at the top corner of the card opposite the title. 

<template>
  <lightning-card title="Card with Actions" icon-name="standard:account">
    <p>This card features some Actions.</p>
    <lightning-button label="New" slot="actions"></lightning-button>
  </lightning-card>
</template>
Card with Actions Example

7. Add an Action to the Footer Slot

The card footer can also include links or actions, like a View All link that navigates to another page or object list view. 

<template>
  <lightning-card title="Actions in Footer" icon-name="standard:account">
    <p>Card Body (custom component)</p>
    <div slot="footer">
      <a class="slds-card__footer-action" href="#">
        View All <span class="slds-assistive-text">Accounts</span>
      </a>
    </div>
  </lightning-card>
</template>
Actions in Footer Example

8. Basic Card with SLDS Classes

To apply extra styling, use Salesforce Lightning Design System (SLDS) utility classes with the class attribute. 

<template>
  <lightning-card title="Sales Overview" icon-name="standard:account">
    <div class="slds-p-around_medium">
      This card body aligned with slds style.
    </div>
  </lightning-card>
</template>

The class slds-p-around_medium adds medium padding around the content and is part of SLDS utility classes.

Basic Card with SLDS Classes