The Lightning card component displays a simple card. You can set the title, the footer, and the body. You can also add action buttons.
The code for the Lightning card component is as follow:
<aura:component>
<Lightning:card footer="Card Footer" title="Hello">
<aura:set attribute="actions">
<Lightning:button label="Search"/>
</aura:set>
<p class="slds-p-horizontal_small">
Card Body (custom component)
</p>
</Lightning:card>
</aura:component>
The following table contains more detailed descriptions of the attributes:
| NAME | TYPE | ACCESS | REQUIRED | DEFAULT | DESCRIPTION |
|---|---|---|---|---|---|
| body | component[] | GLOBAL | No |
Inherited from aura:component. The body of the component. In markup, this is everything in the body tag. |
|
| title | object | GLOBAL | Yes |
The title can include text or another component and is displayed in the header. |
|
| iconName | string | GLOBAL | No |
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. |
|
| actions | component[] | GLOBAL | No |
Actions are components such as button or buttonIcon. Actions are displayed in the header. |
|
| variant | string | GLOBAL | No | base |
The variant changes the appearance of the card. Accepted variants include base or narrow. This value defaults to base. |
| class | string | GLOBAL | No |
A CSS class for the outer element, in addition to the component's base classes. |
|
| footer | object | GLOBAL | No |
The footer can include text or another component. |