Card

A lightning-card 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 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. Actions are displayed 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.

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.

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.

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.

lightning-card implements the cards blueprint in the Salesforce Lightning Design System (SLDS).

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 use the --slds-c-* prefix and change styling for specific elements or properties of a component. Component-specific styling isn’t recommended, because it’s unsupported for SLDS 2, but existing customizations still work with the original SLDS. If you use component styling hooks, limit the components to SLDS themes until SLDS 2 and the Salesforce Cosmos theme become generally available. See Cards: Styling Hooks Overview for documentation on component-specific hooks for this component.

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 using SLDS styling hooks.

Icons are not available in Lightning Out, but they are 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.