Lesson: 03 | Layout

Lightning Layout:

HTML

<template>
  
    <lightning-layout>
            This is a single lightning layout.  
    </lightning-layout>
</template>

Lightning Layout Items:

HTML

<template>  
        <lightning-layout>
            <lightning-layout-item padding="around-small">
                <div class="header-column">
                    <p class="field-title" title="Field 1">Field 1</p>
                    <p>Name</p>
                </div>
            </lightning-layout-item>

            <lightning-layout-item padding="around-small">
                <div class="header-column">
                    <p class="field-title" title="Field 2">Field 2</p>
                    <a href="#">Website</a>
                </div>
            </lightning-layout-item>
            <lightning-layout-item padding="around-small">
                <div class="header-column">
                    <p class="field-title" title="Field 2">Field3</p>
                    <p>
                        Address
                    </p>
                </div>
            </lightning-layout-item>
        </lightning-layout>
</template>

CSS

.c-container {
    border: 1px solid #d8dde6;
    margin: 10px 0 20px 0;
}
.header-column {
    padding: 0 2rem;
}
.field-title {
    font-size: .75rem;
    line-height: 1.25;
    color: #54698d;
    margin-bottom: .25rem;
}

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

Mastered by 66 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: 03 | Layout

Lightning Layout:

HTML

Preview

Video

Lightning Layout Items:

HTML

CSS

Preview

Video

Lightning Web Components

Login to your account

Lesson: 03 | Layout

Lightning Layout:

HTML

Lightning Layout Items:

HTML

Lightning Web Components