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

Usage Considerations

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.

1<aura:component>
2    <aura:attribute name="name" type="String" default="Your Name"/>
3    <aura:attribute name="myTitleName" type="Aura.Component[]">
4        <h1>Hello {! v.name }</h1>
5    </aura:attribute>
6    <lightning:card footer="Card Footer">
7        <aura:set attribute="title">
8            {!v.myTitleName}
9        </aura:set>
10        <!-- actions and body markup here -->
11    </lightning:card>
12</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">
8            Card Body (custom component)
9        </p>
10    </lightning:card>

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

Lightning Components Developer Guide

lightning:card

Attributes