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. To style the card body, use the Lightning Design System helper classes.
This component inherits styling from cards in the Lightning Design System.
Here is an example.
<aura:component> <lightning:card> <aura:set attribute="title"> Hello! </aura:set> <aura:set attribute="footer"> <lightning:badge label="footer"/> </aura:set> <aura:set attribute="actions"> <lightning:button label="New"/> </aura:set> <p class="slds-p-horizontal--small"> Card Body (custom component) </p> </lightning:card> </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 previous example passes in the title and footer attributes 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, as shown in this example.
<aura:component> <aura:attribute name="name" type="String" default="Your Name"/> <aura:attribute name="myTitleName" type="Aura.Component[]"> <h1>Hello {! v.name }</h1> </aura:attribute> <lightning:card footer="Card Footer"> <aura:set attribute="title"> {!v.myTitleName} </aura:set> <!-- actions and body markup here --> </lightning:card> </aura:component>
To pass in a value of String type, you can include it in the <lightning:card> tag.
<aura:component> <aura:attribute name="myTitle" type="String" default="My Card Title"/> <lightning:card title="{!v.myTitle}" footer="Card Footer"> <aura:set attribute="actions"> <lightning:button label="New"/> </aura:set> <p class="slds-p-horizontal--small"> Card Body (custom component) </p> </lightning:card>
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 | Object | 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 | Object | 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. |