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

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