LWC Lightning Web Component in Record Context

Sample Code:

LWC HTML:

1. <template>  
2.   
3.     <lightning-card  title="Case Mini View">  
4.         <lightning-record-view-form record-id={recordId}    
5.                                     object-api-name="Case">    
6.             <div class="slds-grid slds-wrap">    
7.                 <div class="slds-col slds-size_1-of-2">                                
8.                     <lightning-output-field field-name="Subject">    
9.                     </lightning-output-field>    
10.                 </div>    
11.                 <div class="slds-col slds-size_1-of-2">    
12.                     <lightning-output-field field-name="Status">    
13.                     </lightning-output-field>    
14.                 </div>    
15.                 <div class="slds-col slds-size_1-of-2">                                
16.                     <lightning-output-field field-name="Reason">    
17.                     </lightning-output-field>    
18.                 </div>    
19.                 <div class="slds-col slds-size_1-of-2">    
20.                     <lightning-output-field field-name="Origin">    
21.                     </lightning-output-field>    
22.                 </div>    
23.             </div>    
24.         </lightning-record-view-form>  
25.     </lightning-card>  
26.   
27. </template> 

LWC JavaScript:

1. import { LightningElement, api } from 'lwc';  
2.   
3. export default class CaseMiniView extends LightningElement {  
4.   
5.     @api recordId;  
6.       
7. } 

LWC js-meta.xml:

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">  
3.     <apiVersion>48.0</apiVersion>  
4.     <isExposed>true</isExposed>  
5.     <targets>  
6.         <target>lightning__RecordPage</target>  
7.     </targets>  
8. </LightningComponentBundle> 

Output: