Four Column Record View Page Lightning Component

Four Column Record View Page Lightning Component

Lighting Component:- AccountRecordViewChild

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global">
    <aura:attribute name="recordId" type="Id"/>
    <aura:attribute name="brokerFields" type="String[]" default="Name,Title,Phone,website"/>
        <div class="slds-p-left_large slds-p-right_medium">
            <lightning:recordForm aura:id="brokerForm"
                                recordId="{!v.recordId}"
                                objectApiName="Account"
                                fields="{!v.brokerFields}"
                                columns="1"
                                mode="View"
                                density="auto"/>
        </div>
</aura:component>

Lighting Component:- AccountRecordView

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    
    <lightning:card >
        <!-- lightning:card body section starts -->
        <p class="slds-p-horizontal_small">
            <!-- Forming a grid of two equal columns -->
            <div class="slds-box slds-box_xx-small  slds-m-top_medium slds-m-bottom_xx-small" style="background-color:#5DADE2!important;color:#fff!important9; color:white; font-size: 17px;text-align:left;">
                <b><p class="slds-m-left_x-small slds-m-left_large slds-m-right_large">Account Information</p></b>
            </div>
            
            <div class="slds-grid">  
                <div class="slds-col slds-size_1-of-4">
                    <div class="slds-box slds-box_xx-small  slds-m-top_medium slds-m-bottom_xx-small" style="background-color:#D6EAF8!important;color:#fff!important9; color:black; font-size: 11px;text-align:left;">
                        <b><p class="slds-m-left_x-small slds-m-left_large slds-m-right_large"><center>Accounts Summary</center></p></b>
                    </div>
                    <c:AccountRecordViewChild  recordId="{!v.recordId}" brokerFields="['Name','Key_Physician_Contact__c','MSA__c','Providers_in_Practice__c','Office_Locations__c']"/> 
                </div>
                <div class="slds-col slds-size_1-of-4">
                    <div class="slds-box slds-box_xx-small  slds-m-top_medium slds-m-bottom_xx-small" style="background-color:#D6EAF8!important;color:#fff!important9; color:black; font-size: 11px;text-align:left;">
                        <b><p class="slds-m-left_x-small slds-m-left_large slds-m-right_large"><center>Speciality</center></p></b>
                    </div>
                    <c:AccountRecordViewChild  recordId="{!v.recordId}" brokerFields="['No_of_Doctors__c','Speciality__c','OtherSpecialty_within_Practice__c']"/>
                </div>
                
                <div class="slds-col slds-size_1-of-4">
                    <div class="slds-box slds-box_xx-small  slds-m-top_medium slds-m-bottom_xx-small" style="background-color:#D6EAF8!important;color:#fff!important9; color:black; font-size: 11px;text-align:left;">
                        <b><p class="slds-m-left_x-small slds-m-left_large slds-m-right_large"><center>Address</center></p></b>
                    </div>
                    <c:AccountRecordViewChild  recordId="{!v.recordId}" brokerFields="['Website','City__c','State__c']"/>
                </div>
                <div class="slds-col slds-size_1-of-4">
                    <div class="slds-box slds-box_xx-small  slds-m-top_medium slds-m-bottom_xx-small" style="background-color:#D6EAF8!important;color:#fff!important9; color:black; font-size: 11px;text-align:left;">
                        <b><p class="slds-m-left_x-small slds-m-left_large slds-m-right_large"><center>Others</center></p></b>
                    </div>
                    <c:AccountRecordViewChild  recordId="{!v.recordId}" brokerFields="['Stage__c','Type__c','Group_Ownership__c']"/>
                </div>
            </div>
            <!--2nd Seaction-->            
            <div class="slds-box slds-box_xx-small  slds-m-top_medium slds-m-bottom_xx-small" style="background-color:#5DADE2!important;color:#fff!important9; color:white; font-size: 17px;text-align:left;">
                <b><p class="slds-m-left_x-small slds-m-left_large slds-m-right_large">Contact Information</p></b>
            </div>
            <div class="slds-grid">
                <div class="slds-col slds-size_1-of-4">
                    <div class="slds-box slds-box_xx-small  slds-m-top_medium slds-m-bottom_xx-small" style="background-color:#D6EAF8!important;color:#fff!important9; color:black; font-size: 11px;text-align:left;">
                        <b><p class="slds-m-left_x-small slds-m-left_large slds-m-right_large"><center>Phone</center></p></b>
                    </div>
                    <c:AccountRecordViewChild  recordId="{!v.recordId}" brokerFields="['Phone','Phone_2__c','Phone_3__c']"/>
                </div>
            </div>
        </p>
    </lightning:card>           
</aura:component>

OutPut:-  Account Record View Page