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. The title can contain an icon, text, and actions. Actions that can be placed in the title include lightning:button, lightning:buttonIcon, or lightning:buttonMenu. The body and footer can contain either text or another component.

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

Here is an example.

<aura:component>
    <lightning:card footer="Card Footer" title="Hello">
        <aura:set attribute="actions">
            <lightning:button label="New"/>
        </aura:set>
            Card Body (custom component)
    </lightning:card>
</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.