---
schema_version: "1"
id: 83e5d6e87afe84f31e88c9f19c83378eae0349321663ec478320b7f1e8e4aa3d
title: Card
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/lwc/components/lightning/card/lightning-card.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-card.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 41bff49e2818b57c5f52bb1a2e48de66ad81e6268f111f274c8b5cb8432cc697
products:
  - Lightning Component Reference
---

# Card

**`lightning-card`**

Cards apply a container around a related grouping of information.

**For Use In**

Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App, Mobile Offline

::::::tabset{tabs='["Example", "Develop", "Specifications"]'}

:::::tab

::component-playground{component="card" model="lwc" namespace="lightning"}


:::::

:::::tab

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.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-card variant="narrow" icon-name="standard:opportunity">
        <h1 slot="title">This is a title</h1>
        <h1>This is the body</h1>
        <div slot="actions">
            <lightning-button-icon
                icon-name="utility:down"
            ></lightning-button-icon>
        </div>
        <div slot="footer">
            <h6>This is the footer</h6>
        </div>
    </lightning-card>
</template>
```
<!-- prettier-ignore-end -->

`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](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-slots).

## Design

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

|                | SLDS 1                                                                                                                                | SLDS 2                                                                                                          |
| :------------- | :------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------- |
| **Design**     | [Cards](https://v1.lightningdesignsystem.com/components/cards/)                                                                       | [Cards](https://www.lightningdesignsystem.com/components/cards/)                                                |
| **For Use In** | Lightning Experience, Experience Builder sites, Salesforce mobile app, Lightning Out (Beta), Standalone Lightning app, Mobile Offline | [Lightning Experience](https://help.salesforce.com/s/articleView?id=xcloud.customize_ui_enhancedlex.htm&type=5) |

## Add an Action to the Footer Slot

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 &lt;a&gt; 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.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-card title="Hello">
        <lightning-button label="New" slot="actions"></lightning-button>
        <lightning-button label="Old" slot="actions"></lightning-button>
        <p class="slds-p-horizontal_small">Card Body (custom component)</p>
        <div slot="footer">
            <a class="slds-card__footer-action" href="#"
                >View All
                <span class="slds-assistive-text">Accounts</span>
            </a>
        </div>
    </lightning-card>
</template>
```
<!-- prettier-ignore-end -->

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`](/docs/platform/lightning-component-reference/guide/lightning-navigation.html). For more information, see [Basic Navigation](https://developer.salesforce.com/docs/platform/lwc/guide/use-navigate-basic).

## Card with Illustration

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](/docs/platform/lightning-component-reference/guide/lightning-illustration.html).

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

## Card with Loading Indicator

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](/docs/platform/lightning-component-reference/guide/lightning-spinner.html) to show a spinner on the card before the content loads.

```html
 <lightning-card title="Tasks" icon-name="standard:task">
      <lightning-spinner alternative-text="Loading" size="medium"></lightning-spinner>
      <p slot="description">
        Loading tasks...
        </p>
    </lightning-card>
```

## Card with a Data Table

A card is useful for showing a list of related records or contacts. By placing a [`lightning-datatable` component](/docs/platform/lightning-component-reference/guide/lightning-datatable.html) inside the card, you can present tabular information within a card.

```html
 <lightning-card title="Contacts" icon-name="standard:contact">
      <lightning-button label="New" slot="actions"></lightning-button>

        <lightning-datatable
                key-field="id"
                data={data}
                columns={columns}>
        </lightning-datatable>
    </lightning-card>
```

## Card with Tiles

A card can show records by using tiles. To nest record data in a tile, use the [`lightning-tile` component](/docs/platform/lightning-component-reference/guide/lightning-tile.html). 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.

```html
<lightning-card title="Contacts" icon-name="standard:contact">
    <lightning-button label="New" slot="actions" onclick={handleNew}></lightning-button>
        <div class="slds-grid slds-wrap slds-var-m-around_medium">
            <div class="slds-col slds-size_1-of-1 slds-medium-size_6-of-12">
                <lightning-tile label="Astro Nomical" href="/path/to/somewhere" actions={actions}
                onactiontriggered={handleAction} type="media" class="slds-var-m-around_medium">
                    <lightning-icon slot="media" icon-name="standard:contact"></lightning-icon>
                    <lightning-layout>
                        <lightning-layout-item flexibility="auto" padding="around-small">
                            <p class="slds-truncate" title="Company">Company:</p>
                            <p class="slds-truncate" title="Email">Email:</p>
                        </lightning-layout-item>
                        <lightning-layout-item flexibility="auto" padding="around-small">
                            <p class="slds-truncate" title="Salesforce">Salesforce</p>
                            <p class="slds-truncate" title="astro@nomical.com">astro@nomical.com</p>
                        </lightning-layout-item>
                    </lightning-layout>
                </lightning-tile>
            </div>
            <div class="slds-col slds-size_1-of-1 slds-medium-size_6-of-12">
            <!-- More tiles here -->
            </div>
        </div>
    <p slot="footer">View All</p>
</lightning-card>
```

## Nested Cards

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

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

## Component Styling

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

### Icons

`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](https://v1.lightningdesignsystem.com/icons/) to view available icons.

### Utility Classes

To apply additional styling, use the SLDS [utility classes](https://v1.lightningdesignsystem.com/utilities/alignment) with the `class` attribute, as shown in the [Add an Action to the Footer Slot](#add-an-action-to-the-footer-slot) section.

### Styling Hooks

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](https://v1.lightningdesignsystem.com/components/overview/) for available component styling hooks.

For more information, see [Style Components Using Lightning Design System Styling Hooks](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-css-custom-properties) in the Lightning Web Components Developer Guide.


`lightning-card` also includes [`lightning-icon`](/docs/platform/lightning-component-reference/guide/lightning-icon.html) and [`lightning-button`](/docs/platform/lightning-component-reference/guide/lightning-button.html) components that you can customize by using SLDS styling hooks.

## Usage Considerations

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](https://developer.salesforce.com/docs/platform/lwc/guide/migrate-map-aura-lwc-components) in the Lightning Web Components Developer Guide.


:::::

:::::tab
::component-specification{component="card" model="lwc" namespace="lightning"}

:::::

::::::