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.

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.

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.

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.

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.

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.

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

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.