Aura Component
Layout
Represents a responsive grid system for arranging containers on a page.
Descriptor
lightning:layoutTargets
Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out / Visualforce, Standalone Lightning App
Example Options
Simple Layout
This example creates a simple layout with field headers.
Code
<aura:component> <p>This example creates a simple layout with field headers.</p> <div class="c-container"> <lightning:layout > <lightning:layoutItem padding="around-small"> <div class="header-column"> <p class="field-title" title="Field 1">Field 1</p> <p>Name</p> </div> </lightning:layoutItem> <lightning:layoutItem padding="around-small"> <div class="header-column"> <p class="field-title" title="Field2 (3)">Field 2 (3) <lightning:buttonIcon iconName="utility:down" variant="border-filled" size="small" alternativeText="More Actions" /> </p> <p>Eligibility</p> </div> </lightning:layoutItem> <lightning:layoutItem padding="around-small"> <div class="header-column"> <p class="field-title" title="Field 3">Field 3</p> <a href="#">Website</a> </div> </lightning:layoutItem> <lightning:layoutItem padding="around-small"> <div class="header-column"> <p class="field-title" title="Field 4">Field 4</p> <p> <span title="">Address</span> </p> </div> </lightning:layoutItem> </lightning:layout> </div> </aura:component> 