One Column Layout New Contact Creation LWC

New Contact Creation LWC: One Column Layout


Here is the Sample LWC Code:

<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-input label="First Name" placeholder="First Name" type="text" variant="standard"></lightning-input>
        <lightning-input label="Last Name" placeholder="Last Name" type="text" variant="standard"></lightning-input>
        <lightning-input label="Email" placeholder="Email" type="text" variant="standard"></lightning-input>
        <lightning-input label="Phone" placeholder="Phone" type="text" variant="standard"></lightning-input>
        <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>
    </div>
</lightning-card>