Lesson: 02 | Card

Simple Lightning Card

HTML

<template>
        <lightning-card  title="Hello">
        </lightning-card>
</template>

Lightning Card with Body

HTML

<template>
        <lightning-card  title="Hello">
            <p class="slds-p-horizontal_small">Card Body (custom component)</p>
        </lightning-card>
</template>

Lightning Card with Body and Button

HTML

<template>
        <lightning-card  title="Hello">
            <lightning-button label="New" slot="actions"></lightning-button>
            <p class="slds-p-horizontal_small">Card Body (custom component)</p>
        </lightning-card>
</template>

Lightning Card with Body , Button and Footer

HTML

<template>
        <lightning-card  title="Hello">
            <lightning-button label="New" slot="actions"></lightning-button>
            <p class="slds-p-horizontal_small">Card Body (custom component)</p>
            <p slot="footer">Card Footer</p>
        </lightning-card>
</template>

Prev You need to login to have access to the quizzes. Next

Mastered by 72 users.

Lightning Web Components

A. Component Reference (27 lessons)

B. Lightning Web Components | Utilities (11 lessons)

C. Lightning Web Component Guide (41 lessons)

D. Java Script Methods for LWC (23 lessons)

E. HTML (18 lessons)

F. JavaScript (19 lessons)

Go to top

Lesson: 02 | Card

Simple Lightning Card

HTML

Preview

Video

Lightning Card with Body

HTML

Preview

Video

Lightning Card with Body and Button

HTML

Preview

Video

Lightning Card with Body , Button and Footer

HTML

Preview

Video

Lightning Web Components

Login to your account

Lesson: 02 | Card

Simple Lightning Card

HTML

Lightning Card with Body

HTML

Lightning Card with Body and Button

HTML

Lightning Card with Body , Button and Footer

HTML

Lightning Web Components