lightning:card

Cards are used to apply a container around a related grouping of information.

A lightning:card is used to apply a stylized container around a grouping of information that contains a title, body, and footer. The information could be a single item or a group of items such as a related list.

To style the card body, use the Lightning Design System helper classes. Use the variant or class attributes for additional styling.

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

Here is an example.

1<aura:component>
2    <lightning:card footer="Card Footer">
3        <aura:set attribute="title">
4            <lightning:badge label="Hello"/>
5        </aura:set>
6        <aura:set attribute="actions">
7            <lightning:button label="New"/>
8        </aura:set>
9        <p class="slds-p-horizontal--small">
10            Card Body (custom component)
11        </p>
12    </lightning:card>
13</aura:component>

Attributes

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.

Lightning Components Developer Guide

lightning:card

Attributes