Card

A lightning-card groups related information in a stylized container. The information can be a single item or a group of items such as a related list.

A lightning-card can contain a title, body, actions, and a footer. The title, actions, and footer are optional. You can also provide an icon in the header in front of the title.

Use the actions slot to pass content such as lightning-button-icon or lightning-button to perform an action when clicked. An action menu is shown on the top corner of the card opposite the title.

Here’s an example that passes in the title, actions, and footer as slots, and includes an icon.

1<template>
2    <lightning-card variant="narrow" icon-name="standard:opportunity">
3        <h1 slot="title">This is a title</h1>
4        <h1>This is the body</h1>
5        <div slot="actions">
6            <lightning-button-icon
7                icon-name="utility:down"
8            ></lightning-button-icon>
9        </div>
10        <div slot="footer">
11            <h6>This is the footer</h6>
12        </div>
13    </lightning-card>
14</template>

title is available as an attribute or a slot. Pass in the title as a slot if you want to pass in markup, such as making the title bold.

Use the title attribute if your title doesn’t need extra formatting. Setting the title attribute overwrites the title slot. For more information, see Use Slots as Placeholders.

lightning-card implements the cards blueprint in the Salesforce Lightning Design System (SLDS). The cards adapt to SLDS 1 or SLDS 2 styling based on the org’s theme or the container app that you use.

The card footer is optional and can contain an action to link to another page. If using the card footer, we recommend using a View All link that takes a user to the object list view.

This example adds the View All link to the footer slot, specifying the slds-card__footer-action class on the <a> tag. This class makes the footer’s click target span the entire width of the card so you can click anywhere in the footer. The class isn’t required.

For a View All link, set the href value of the tag to a URL to take the user to the object list view.

1<template>
2    <lightning-card title="Hello">
3        <lightning-button label="New" slot="actions"></lightning-button>
4        <lightning-button label="Old" slot="actions"></lightning-button>
5        <p class="slds-p-horizontal_small">Card Body (custom component)</p>
6        <div slot="footer">
7            <a class="slds-card__footer-action" href="#"
8                >View All
9                <span class="slds-assistive-text">Accounts</span>
10            </a>
11        </div>
12    </lightning-card>
13</template>

To navigate to records, list views, and objects in Lightning Experience, Experience Builder sites, and the Salesforce mobile app, use the navigation service, lightning/navigation. For more information, see Basic Navigation.

A card can present an illustration in the card body when there’s no data to show. To maintain a consistent experience, use the lightning-illustration component.

1<lightning-card title="Tasks" icon-name="standard:task">
2      <lightning-empty-state illustration-name="noresults:unknown" title="No new tasks">
3        <p slot="description">Nothing needs your attention right now. Check back later.
4        </p>
5      </lightning-empty-state>
6    </lightning-card>

When you expect content to load with a noticeable delay, a loading indicator is helpful to notify a user of the delay. Use the lightning-spinner component to show a spinner on the card before the content loads.

1<lightning-card title="Tasks" icon-name="standard:task">
2      <lightning-spinner alternative-text="Loading" size="medium"></lightning-spinner>
3      <p slot="description">
4        Loading tasks...
5        </p>
6    </lightning-card>

A card is useful for showing a list of related records or contacts. By placing a lightning-datatable component inside the card, you can present tabular information within a card.

1<lightning-card title="Contacts" icon-name="standard:contact">
2      <lightning-button label="New" slot="actions"></lightning-button>
3
4        <lightning-datatable
5                key-field="id"
6                data={data}
7                columns={columns}>
8        </lightning-datatable>
9    </lightning-card>

A card can show records by using tiles. To nest record data in a tile, use the lightning-tile component. Within a tile, show an icon by using the media slot. To make your content responsive, consider using the [lightning-layout component] and the SLDS grid system.

1<lightning-card title="Contacts" icon-name="standard:contact">
2    <lightning-button label="New" slot="actions" onclick={handleNew}></lightning-button>
3        <div class="slds-grid slds-wrap slds-var-m-around_medium">
4            <div class="slds-col slds-size_1-of-1 slds-medium-size_6-of-12">
5                <lightning-tile label="Astro Nomical" href="/path/to/somewhere" actions={actions}
6                onactiontriggered={handleAction} type="media" class="slds-var-m-around_medium">
7                    <lightning-icon slot="media" icon-name="standard:contact"></lightning-icon>
8                    <lightning-layout>
9                        <lightning-layout-item flexibility="auto" padding="around-small">
10                            <p class="slds-truncate" title="Company">Company:</p>
11                            <p class="slds-truncate" title="Email">Email:</p>
12                        </lightning-layout-item>
13                        <lightning-layout-item flexibility="auto" padding="around-small">
14                            <p class="slds-truncate" title="Salesforce">Salesforce</p>
15                            <p class="slds-truncate" title="astro@nomical.com">astro@nomical.com</p>
16                        </lightning-layout-item>
17                    </lightning-layout>
18                </lightning-tile>
19            </div>
20            <div class="slds-col slds-size_1-of-1 slds-medium-size_6-of-12">
21            <!-- More tiles here -->
22            </div>
23        </div>
24    <p slot="footer">View All</p>
25</lightning-card>

A nested card groups data within an object, such as account details with sections for contact info and recent activity.

1<lightning-card title="Outer Card Header" icon-name="standard:account">
2      <lightning-button label="New" slot="actions"></lightning-button>
3      <lightning-card title="Card Header" icon-name="standard:contact">
4        <p class="slds-var-m-around_medium">This is a nested card with no styling (default)</p>
5      </lightning-card>
6      <p slot="footer">View All</p>
7    </lightning-card>

Use a combination of icons and utility classes to customize the card style.

lightning-card displays an SLDS icon if you pass an icon name with the icon-name attribute. The icon is rendered using lightning-icon.

When applying SLDS classes or icons, check that they are available in the SLDS release tied to your org. The latest SLDS resources become available only when the new release is available in your org.

Visit icons to view available icons.

To apply additional styling, use the SLDS utility classes with the class attribute, as shown in the Add an Action to the Footer Slot section.

Component styling hooks provide CSS custom properties that use the --slds-c-* prefix and they change styling for specific elements or properties of a component. Component styling hooks are supported for SLDS 1 only. See the SLDS 1 component blueprints for available component styling hooks.

For more information, see Style Components Using Lightning Design System Styling Hooks in the Lightning Web Components Developer Guide.

lightning-card also includes lightning-icon and lightning-button components that you can customize by using SLDS styling hooks.

Icons aren’t available in Lightning Out, but they’re available in Lightning Components for Visualforce and other experiences.

This component has usage differences from its Aura counterpart. See Base Components: Aura Vs Lightning Web Components in the Lightning Web Components Developer Guide.