The lightning-card in LWC Lightning is the standard UI component in Salesforce, which is used to display information in an organised way. In LWC Salesforce, Lightning Card can optionally display a single record or a list of related data, like a related list, and it helps in making components more readable and user-friendly.
A lightning-card can include a title, body, actions, and a footer, giving you flexibility in how content is presented. The title, actions, and footer are optional, and you can also add an icon in the header to enhance visual clarity and improve user experience.
In this blog, we’ll explore how to use the Lightning Card in LWC Salesforce, along with practical examples to help you design clean and effective Lightning Web Components.
Syntax for Lightning Card in LWC
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 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 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>
On click of view more button at footer alert will be displayed as per below.
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.
Conclusion
The lightning-card in LWC is a useful and powerful element for creating beautiful and uniform UI components in lightning web components salesforce applications. This flexibility makes it possible to represent titles, actions, body content, and even an optional footer, turning the card into a container for a well formatted collection of data.
With lightning-card, developers save precious development time and have the assurance that their components comply with Salesforce’s best practices around accessibility, design harmonization, and superior user experiences, resulting in more polished and user friendly applications.
