Lightning:card in Salesforce

Lightning Cards are used to form a container around a piece of information related to a single item or group of item. Lightning Cards have title, body, footer. We can make use of the lightning design system helper class to style the body. The title can be simple text or another component and is displayed in the header. The footer can be simple text or another component. "Actions" attribute is also supported with a lightning card and is displayed in the header.  "Actions" are nothing but the components such as a button or button icon. We can make use of attribute "iconName", the icon is displayed in the header to the left of the title.

Sample example:

<aura:component>

    <lightning:card title="Header Text" iconName="standard:add_contact" footer="Footer Text">

        <aura:set attribute="actions">

            <lightning:button label="New"/>

        </aura:set>

        <p class="slds-p-horizontal_small">

            Body Text

        </p>

    </lightning:card>

</aura:component>

<aura:component>

    <lightning:card title="Header Text" iconName="standard:add_contact" footer="Footer Text">

        <aura:set attribute="actions">

            <lightning:button label="New"/>

        </aura:set>

        <p class="slds-p-horizontal_small">

            Body Text

        </p>

    </lightning:card>

</aura:component>

Sample image of how the lightning card looks like.

Let us take a simple example to understand how we can use lightning card in a real example,

Component:

<aura:component controller="searchAccountController" >

    <aura:attribute name="keywordHolder" type="string" />

    <aura:attribute name="accountList" type="list" />

    <lightning:input name="AccountSearch"  label="Enter Account Name" value="{!v.keywordHolder}"/>

    <lightning:button label="Search Account" onclick="{!c.findAccount}" />

    <div class="slds-grid slds-wrap">

    <aura:iteration var="acc" items="{!v.accountList}" >

        <div class="slds-col slds-size_1-of-4 slds-p-around_small">

    <lightning:card title="Account Information" footer="Sample footer">

        <aura:set attribute="actions">

            <lightning:button label="Show Full Details"/>

        </aura:set>

        <p class="slds-p-horizontal_small">

        {!acc.Name}

        {!acc.type}

        {!acc.industry}

        {!acc.phone}

        </p>

    </lightning:card>

        </div> 

    </aura:iteration>

    </div>

</aura:component>

Javascript Controller:

({

 findAccount : function(component, event, helper) {

       

        var action=component.get('c.fetchAccount');

        action.setParams({

            searchKeyWord : component.get("v.keywordHolder")

           

        });

       

        action.setCallback(this,function(response){

            var state=response.getState();

            var response1=response.getReturnValue();

            if(state==="SUCCESS")

            {

                component.set("v.accountList",response1);

            }

           

        });

        $A.enqueueAction(action);

 }

})

Apex controller:

public class searchAccountController {

@AuraEnabled

 public static List < account > fetchAccount(String searchKeyWord) {

  String searchKey = searchKeyWord + '%';

  List < Account > returnList = new List < Account > ();

  List < Account > lstOfAccount = [select id, Name, Type, Industry, Phone, Fax from account where Name LIKE: searchKey limit 10];

  for (Account acc: lstOfAccount) {

   returnList.add(acc);

  }

  return returnList;

 }

}

Application:

<aura:application extends="force:slds" >

 <c:SimpleAccountSearch></c:SimpleAccountSearch>

</aura:application>

OUTPUT :