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.
Use the variant or class attributes to customize the styling.
A lightning:card contains a title, body, and footer. The title can contain an icon, text, and actions. Actions that can be placed in the title include lightning:button, lightning:buttonIcon, or lightning:buttonMenu. The body and footer can contain either text or another component.
This component inherits styling from cards in the Lightning Design System.
Here is an example.
<aura:component> <lightning:card footer="Card Footer" title="Hello"> <aura:set attribute="actions"> <lightning:button label="New"/> </aura:set> Card Body (custom component) </lightning:card> </aura:component>
Attribute Name | Attribute Type | Description | Required? |
---|---|---|---|
actions | Component[] | Actions are components such as button or buttonIcon. Actions are displayed in the header. | |
body | Component[] | The body of the component. In markup, this is everything in the body of the tag. | |
class | String | A CSS class for the outer element, in addition to the component's base classes. | |
footer | Component[] | The footer can include text or another component. | |
iconName | String | The Lightning Design System name of the icon. Names are written in the format '\utility:down\' where 'utility' is the category, and 'down' is the specific icon to be displayed. The icon is displayed in the header to the left of the title. | |
title | Component[] | The title can include text or another component, and is displayed in the header. | Yes |
variant | String | The variant changes the appearance of the card. Accepted variants include base or narrow. This value defaults to base. |