Ad Code

Responsive Advertisement

New Contact Creation 3 Column Layout LWC

AMUL BARANWAL March 04, 2020
New Contact Creation 3 Column Layout LWC



Web Component:

<lightning-card title="New Contact" icon-name="standard:contact" variant="base">
    <div slot="actions">
        <lightning-button class="slds-theme_brand" icon-position="left" variant="brand" label="Back to Contact" icon-name="standard:return_order"></lightning-button>
    </div>
    <div slot="footer">
        <lightning-button class="slds-theme_inverse slds-button_outline-brand" variant="inverse" label="Submit"></lightning-button>
    </div>
    <div class="slds-card__body_inner">
        <div style="font-size: 0.8125rem;">
            <p>Please fill below form detail</p>
        </div>
        <lightning-layout class="slds-m-around_small slds-wrap" multiple-rows="true">
            <lightning-layout-item size="4">
                <lightning-input label="First Name" placeholder="First Name" type="text" variant="standard"></lightning-input>
                <lightning-input label="Email" placeholder="Email" type="text" variant="standard"></lightning-input>
            </lightning-layout-item>
            <lightning-layout-item size="4">
                <lightning-input label="Last Name" placeholder="Last Name" type="text" variant="standard"></lightning-input>
                <lightning-input label="Phone" placeholder="Phone" type="text" variant="standard"></lightning-input>
            </lightning-layout-item>
            <lightning-layout-item size="4">
                <lightning-input label="DOB" placeholder="DOB" type="date" variant="standard"></lightning-input>
                <lightning-input label="Company Name" placeholder="Company Name" type="text" variant="standard"></lightning-input>
            </lightning-layout-item>
        </lightning-layout>
    </div>

</lightning-card>

 AURA Component:

 <lightning:card title="New Contact" iconName="standard:contact" variant="base">
    <aura:set attribute="actions">
        <lightning:button class="slds-theme_brand" iconPosition="left" variant="brand" label="Back to Contact" iconName="standard:return_order"></lightning:button>
    </aura:set>
    <aura:set attribute="footer">
        <lightning:button class="slds-theme_inverse slds-button_outline-brand" variant="inverse" label="Submit"></lightning:button>
    </aura:set>
    <div class="slds-card__body_inner">
        <div style="font-size: 0.8125rem;">
            <p>Please fill below form detail</p>
        </div>
        <lightning:layout class="slds-m-around_small slds-wrap" multipleRows="true">
            <lightning:layoutItem size="4">
                <lightning:input label="First Name" placeholder="First Name" type="text" variant="standard"></lightning:input>
                <lightning:input label="Email" placeholder="Email" type="text" variant="standard"></lightning:input>
            </lightning:layoutItem>
            <lightning:layoutItem size="4">
                <lightning:input label="Last Name" placeholder="Last Name" type="text" variant="standard"></lightning:input>
                <lightning:input label="Phone" placeholder="Phone" type="text" variant="standard"></lightning:input>
            </lightning:layoutItem>
            <lightning:layoutItem size="4">
                <lightning:input label="DOB" placeholder="DOB" type="date" variant="standard"></lightning:input>
                <lightning:input label="Company Name" placeholder="Company Name" type="text" variant="standard"></lightning:input>
            </lightning:layoutItem>
        </lightning:layout>
    </div>

</lightning:card>

Reactions

Post a Comment

4 Comments

  1. Unknown8 March 2020 at 09:07

    Water Hack Burns 2 lb of Fat OVERNIGHT

    More than 160000 men and women are hacking their diet with a simple and SECRET "liquids hack" to drop 1-2 lbs every night as they sleep.

    It is painless and it works every time.

    Here's how to do it yourself:

    1) Take a drinking glass and fill it half full

    2) Proceed to learn this strange hack

    you'll become 1-2 lbs thinner as soon as tomorrow!

    ReplyDelete
  2. Mohit Bansal27 August 2020 at 02:29

    If you want to get brief over of multiple profiles you can simply use BOFC app to compare multiple profiles of Salesforce in few clicks

    ReplyDelete
  3. Pharmacypillshop3 January 2022 at 02:58

    Anxiety is a behavioral aspect present in all human beings. Buy Clonazepam(Klonopin) 2mg Online The only fact that can create some difference is that when this is beyond one’s control, it comes to a disorder which might end up to panic attacks and even severe seizure attacks. This continuous existence of anxiety in an individual might end up causing depression, distress, and nervousness.

    ReplyDelete
  4. Rxmedsusa3 January 2022 at 22:53

    Are you suffering from unbearable muscle and bone pain? Has your doctor or pharmacist prescribed you SOMA for relief from the discomfort and pain associated with the painful, Buy soma 350 mg online acute musculoskeletal condition

    ReplyDelete