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.

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

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

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.