Card

A lightning:card applies 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.

Use the variant or class attributes to customize the styling.

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. Actions are displayed on the top corner of the card opposite the title.

To style the card body, use the Lightning Design System helper classes.

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

This component implements styling from cards in the Lightning Design System.

Here is an example that specifies a title, icon, footer, and actions. The actions attribute passes in a lightning:button component.

1<aura:component>
2  <lightning:card
3    title="Card Header"
4    iconName="standard:account"
5    footer="Card Footer"
6  >
7    <aura:set attribute="actions">
8      <lightning:button label="New" />
9    </aura:set>
10    <p class="slds-p-horizontal_small">Card Body</p>
11  </lightning:card>
12</aura:component>

The title and footer attributes are of type Object, which means that you can pass in values of String or Component[] types among some others.

The following example passes in the title attribute as a Component[] type, also known as a facet. The Component[] type is useful if you need to pass in markup to the title or footer. The title attribute renders an <h2>; element in the DOM, so be sure to use markup that’s valid inside <h2>, as in the example.

1<aura:component>
2  <aura:attribute name="name" type="String" default="Your Name" />
3  <aura:attribute name="myTitleName" type="Aura.Component[]">
4    <div>Hello {! v.name }</div>
5  </aura:attribute>
6  <lightning:card footer="Card Footer">
7    <aura:set attribute="title"> {!v.myTitleName} </aura:set>
8    <!-- actions and body markup here -->
9  </lightning:card>
10</aura:component>

To pass in a value of String type, you can include it in the <lightning:card> tag.

1<aura:component>
2  <aura:attribute name="myTitle" type="String" default="My Card Title" />
3  <lightning:card title="{!v.myTitle}" footer="Card Footer">
4    <aura:set attribute="actions">
5      <lightning:button label="New" />
6    </aura:set>
7    <p class="slds-p-horizontal_small">Card Body (custom component)</p>
8  </lightning:card>
9</aura:component>

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, 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<aura:component>
2  <aura:attribute name="myTitle" type="String" default="My Card Title" />
3  <lightning:card title="{!v.myTitle}">
4    <aura:set attribute="footer">
5      <div>
6        <a class="slds-card__footer-action" href="#"
7          >View All
8          <span class="slds-assistive-text">Accounts</span>
9        </a>
10      </div>
11    </aura:set>
12    <p class="slds-p-horizontal_small">Card Body (custom component)</p>
13  </lightning:card>
14</aura:component>

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

Icons are not available in Lightning Out, but they are available in Lightning Components for Visualforce and other experiences.