Toggle Side Panel
Close search

Activity › Forums › Salesforce® Discussions › lightning:card in salesforce.

  • madhulika shah

    Member
    August 30, 2018 at 1:21 PM

    Hi Shradha,

    lightning:card- They are used to apply a container around a related grouping of information. lightning:card is the component container.

  • [adinserter block='9']

  • Prachi

    Member
    August 30, 2018 at 2:07 PM

    Hi shradha,

    Essentially it is a styled article that gives you a nice background and title format if you’re building for Lightning Page Layouts.

    How to use it
    Just like you would use an article or a div tag. You wrap your child components with lightning:card. You have two optional attributes available to you:

    –title — an attribute that lets you specify a title.

    –footer — an attribute that lets you specify a footer.

    Thanks

  • Prachi

    Member
    September 17, 2018 at 1:25 PM

    Hi shradha,

    Essentially it is a styled article that gives you a nice background and title format if you’re building for Lightning Page Layouts.

    thanks.

  • Parul

    Member
    September 17, 2018 at 5:21 PM

    Hi

    A lightning:card component is a group of related information in an article HTML tag.lightning:card uses the styling from Cards in the Lightning Design System.

    Example how to use Card

    <lightning:card title=”Potential Duplicates” iconName=”standard:contact” class=”slds-p-around_medium” >
    <lightning:datatable data=”{!v.mydata}” columns=”{!v.mycolumns}” keyField=”Id” hideCheckboxColumn=”true”/>
    </lightning:card>

     

    Thanks.

  • shariq

    Member
    September 18, 2018 at 11:42 PM

    Hi,

    To get into basics –

    Cards are used to apply a container around a related grouping of information.

     

    Example –

    <aura:component> <lightning:card footer=”Card Footer” title=”Hello”> <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>

    Hope this helps.

Log In to reply.