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 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 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.
