How to Use Lightning Card in LWC Salesforce?

January 22, 2025
128 Views
How to Use Lightning Card in LWC Salesforce?

Lightning card in LWC is used to apply a stylized container around a grouping of information. The information could be a single item or a group of items such as a related list.

A lightning-card can include a title, body, actions, and a footer. The title, actions, and footer are optional elements. Additionally, you can add an icon in the header before the title.

In this blog, we’ll explore how to use the Lightning Card in LWC Salesforce.

Syntax for Lightning Card in Lightning Web Components

Here’s the basic syntax of the lightning-card component:

<lightning-card title="Your Card Title" >
    <p class="slds-p-horizontal_small">Your card content goes here. </p>
</lightning-card>

Lightning card with title, actions, footer as slots and an icon.

In the lightning card we can Utilize the actions slot to include components like `lightning-button-icon` or `lightning-button` that execute specific actions when clicked. These actions are positioned in the top corner of the card, opposite the title.

Below is an example demonstrating how to use slots for the title, actions, and footer, with an icon included.

<template>
    <!-- Lightning card tag with icon name added-->
    <lightning-card variant="narrow" icon-name="standard:opportunity">
        <!--title for lightning card-->
        <h1 slot="title">This is a Lightning card titile</h1>
        <h1><center>This is the body</center></h1>
        <!-- Added action for the lighting card-->
        <div slot="actions">
            <lightning-button-icon
                icon-name="utility:down"
            ></lightning-button-icon>
        </div>
        <!--lightning card footer-->
        <div slot="footer">
            <h6>This is the footer</h6>
        </div>
    </lightning-card>
</template>

How to Use Lightning Card in Salesforce Lightning Web Components

How to add action in lightning card footer

The card footer is an optional and can include an action such as links which links to another page.  In this case we can add View All link which take the user to object list view page.

The below code shows how this can be achieved.

<template>
    <lightning-card title="Lighting card with Footer Action Link">
        <!--Added action -->
        <lightning-button label="Update" slot="actions"></lightning-button>
        <p class="slds-p-horizontal_small"> Body of Lightning card</p>
        <div slot="footer">
            <!--footer with link as a action-->
            <a class="slds-card__footer-action" href="#">
                View All
            </a>
        </div>
    </lightning-card>
</template>

How to Use Lightning Card in Salesforce Lightning Web Components 2

How to display Opportunity Details in a lightning card

Now let’s understand suppose if I want to display opportunity information in lightning card then this can be achieved as per below.

<template>
    <!-- Lightning card tag with icon name added-->
    <lightning-card variant="narrow" icon-name="standard:opportunity">
        <!--title for lightning card-->
        <h1 slot="title">Opportunity Details</h1>
        <!--Body-->
        <div class="slds-p-horizontal_small">
            <p> Opportunity Name : {opportunity.Name} </p>
            <p> Opportunity Type : {opportunity.Type} </p>
            <p> Source : {opportunity.Source} </p>
            <p> Amount : {opportunity.Amount} </p>
            <p> Website : {opportunity.Website} </p>
        </div>
        <!--lightning card footer-->
        <div slot="footer">
            <lightning-button label = "View More" variant ="brand" onclick={handleFooterClick}> </lightning-button>
        </div>
    </lightning-card>
</template>

<script>
import { LightningElement,api } from 'lwc';
export default class LwclightningCardOpp extends LightningElement {
@api opportunity = {
    Name : "ViewonReview",
    Type : "New Customer",
    Source : "Email",
    Amount : "200000/-",
    Website : "Viewonreview.com"
}
handleFooterClick(){
    alert('Clicked Footer');
}
}
</script>

How to Use Lightning Card in Salesforce Lightning Web Components 3

On click of view more button at footer alert will be displayed as per below.

How to Use Lightning Card in Salesforce Lightning Web Components 4

Note: In the above example we have not used any apex, but this can be achieved by calling server-side apex class then from the response show the data.

Lightning Card Styling Support

Lightning card supports/implements the Salesforce Lightning Design System (SLDS).  Different styling hooks can be refereed below.

  1. Style Components Using Lightning Design System Styling Hooks
  2. Styling Hooks

Conclusion

The lightning-card component in Lightning Web Components (LWC) is a powerful tool for creating visually consistent and functional UI elements in Salesforce applications. With its flexibility to include titles, actions, body content, and an optional footer, it serves as a versatile container for grouping information.

By leveraging the lightning-card, developers can not only save time but also ensure their components are aligned with best practices for accessibility and design consistency in Salesforce applications.

Related Links

How useful was this post?

Click on a star to rate it!

Average rating 5 / 5. Vote count: 1

No votes so far! Be the first to rate this post.

Our Contributor

Mithun Naik

Hi there! 👋 I'm Mithun. I'm a software engineer with over 4.5 years of experience, currently working at Shell India. I have experience working as a Salesforce Developer. With good hands-on knowledge on Apex Programming, Lightning Flows, Aura Component, LWC, and Salesforce Configuration. Graduated B.E in computer science & engineering in 2019 and started a career in Salesforce Industry. Additionally, I enjoy writing articles about Salesforce in my free time. I also love to travel and play video games in my free time.

Get the latest tips, news, updates, advice, inspiration, and more….

Contributor of the month
contributor
Ila Anmol Verma

Salesforce Tech Lead | 12X Salesforce Certified | Technical Writer

Categories
...
Boost Your Brand's Visibility

Want to promote your products/services in front of more customers?

...

Leave a Reply

Your email address will not be published. Required fields are marked *

0%
Think you know Salesforce?
Fill in the details to Get Started

What is true about dynamic dashboards?

A Salesforce Administrator has 7 million records that need to be loaded into Salesforce and wants to do it in one batch. How can the records be uploaded in one batch?

Which of the following statements are true about resetting passwords when users get locked out of a Salesforce org that does NOT have single sign-on enabled through an identity service other than Salesforce?

If a user is working in Salesforce when the login hours end, what will happen?

Which of the following can a Case Queue be used for?

Your score is

0%

This will close in 0 seconds