title: How to add heading to the form?
body: <p>I want to add heading to the form, but couldn't found any way to do so, below is my code, and at the end I've given the link of images about how do I want the heading to appear</p>
  
  <pre><code>&lt;div id="forms" class="page-layout simple fullwidth" fxLayout="column"&gt;
      &lt;div class="content p-24"&gt;
          &lt;div class="mb-24" fxLayout="column" fxLayoutAlign="start" fxLayout.gt-md="row"&gt;
  
              &lt;form class="mat-card mat-elevation-z4 p-24 mr-24" fxLayout="column" fxLayoutAlign="start" fxFlex="1 0 auto" name="form" [formGroup]="form"&gt;
                  &lt;!-- &lt;mat-card&gt;New sales person&lt;/mat-card&gt; --&gt;
                  &lt;div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto"&gt;
  
                      &lt;mat-form-field appearance="outline" fxFlex="100" class="pr-4"&gt;
                          &lt;mat-label&gt;ID&lt;/mat-label&gt;
                          &lt;input matInput formControlName="company"&gt;
                          &lt;mat-icon matSuffix&gt;domain&lt;/mat-icon&gt;
                      &lt;/mat-form-field&gt;
  
  
                      &lt;mat-form-field appearance="outline" fxFlex="50" class="pr-4"&gt;
                          &lt;mat-label&gt;Name&lt;/mat-label&gt;
                          &lt;input matInput formControlName="firstName" required&gt;
                          &lt;mat-icon matSuffix class="secondary-text"&gt;account_circle&lt;/mat-icon&gt;
                          &lt;mat-error&gt; Name is required!&lt;/mat-error&gt;
                      &lt;/mat-form-field&gt;
  
  
                      &lt;mat-form-field appearance="outline" fxFlex="50" class="pr-4"&gt;
                          &lt;mat-label&gt;Gender&lt;/mat-label&gt;
                          &lt;mat-select&gt;
                              &lt;mat-option&gt;
                                  Male
                              &lt;/mat-option&gt;
                              &lt;mat-option&gt;
                                  Female
                              &lt;/mat-option&gt;
                              &lt;mat-option&gt;
                                  Rather Not to say.
                              &lt;/mat-option&gt;
                          &lt;/mat-select&gt;
                      &lt;/mat-form-field&gt;
  
                  &lt;/div&gt;
  
  
                  &lt;div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto"&gt;
  
                      &lt;mat-form-field appearance="outline" fxFlex="100" class="pr-4"&gt;
                          &lt;input type='number' matInput name="" id="" placeholder="Phone"&gt;
                          &lt;mat-icon matSuffix&gt;phone&lt;/mat-icon&gt;
                      &lt;/mat-form-field&gt;
  
  
                      &lt;mat-form-field appearance="outline" fxFlex="50" class="pr-4"&gt;
                          &lt;input type='email' matInput name="" id="" placeholder="Email"&gt;
                          &lt;mat-icon matSuffix&gt;email&lt;/mat-icon&gt;
                      &lt;/mat-form-field&gt;
  
                  &lt;/div&gt;
  
  
                  &lt;div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto"&gt;
  
                      &lt;mat-form-field appearance="outline" fxFlex="100" class="pr-4"&gt;
                          &lt;input type='text' matInput name="" id="" placeholder="Team"&gt;
                      &lt;/mat-form-field&gt;
  
  
                      &lt;mat-form-field appearance="outline" fxFlex="50" class="pr-4"&gt;
                          &lt;input type='text' matInput name="" id="" placeholder="Team Leader"&gt;
                      &lt;/mat-form-field&gt;
  
                  &lt;/div&gt;
  
  
  
  
  
                  &lt;div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto"&gt;
  
                      &lt;mat-form-field appearance="outline" fxFlex="100" class="pr-4"&gt;
                          &lt;mat-label&gt;County&lt;/mat-label&gt;
                          &lt;mat-select&gt;
                              &lt;mat-option&gt;
                                  Lorem.
                              &lt;/mat-option&gt;
                              &lt;mat-option&gt;
                                  Lorem.
                              &lt;/mat-option&gt;
                              &lt;mat-option&gt;
                                  Lorem.
                              &lt;/mat-option&gt;
                              &lt;mat-option&gt;
                                  Lorem.
                              &lt;/mat-option&gt;
                          &lt;/mat-select&gt;
                      &lt;/mat-form-field&gt;
  
  
  
                      &lt;mat-form-field appearance="outline" fxFlex="50" class="pr-4"&gt;
                          &lt;mat-label&gt;Sub County&lt;/mat-label&gt;
                          &lt;mat-select&gt;
                              &lt;mat-option&gt;
                                  Lorem.
                              &lt;/mat-option&gt;
                              &lt;mat-option&gt;
                                  Lorem.
                              &lt;/mat-option&gt;
                              &lt;mat-option&gt;
                                  Lorem.
                              &lt;/mat-option&gt;
                              &lt;mat-option&gt;
                                  Lorem.
                              &lt;/mat-option&gt;
                          &lt;/mat-select&gt;
                      &lt;/mat-form-field&gt;
  
  
                  &lt;/div&gt;
  
  
  
  
                  &lt;div fxLayout="row wrap" fxLayoutAlign="start center" fxFlex="1 0 auto"&gt;
  
                      &lt;mat-form-field appearance="outline" fxFlex="100"&gt;
                          &lt;mat-label&gt;Physical Address&lt;/mat-label&gt;
                          &lt;textarea matInput formControlName="address" required&gt;
  
                          &lt;/textarea&gt;
                          &lt;mat-error&gt;Address is required!&lt;/mat-error&gt;
                      &lt;/mat-form-field&gt;
  
                      &lt;mat-form-field appearance="outline" fxFlex="100"&gt;
                          &lt;mat-label&gt;Additional Information &lt;/mat-label&gt;
                          &lt;textarea matInput formControlName="address2"&gt;&lt;/textarea&gt;
                          &lt;mat-error&gt;Additional is required!&lt;/mat-error&gt;
                      &lt;/mat-form-field&gt;
  
                  &lt;/div&gt;
  
  
                  &lt;!-- 
                  &lt;div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto"&gt;
  
                      &lt;mat-form-field appearance="outline" fxFlex="100"&gt;
                          &lt;mat-label&gt;Country&lt;/mat-label&gt;
                          &lt;mat-select formControlName="country" required&gt;
                              &lt;mat-option [value]="'United States of America'"&gt;
                                  United States of America
                              &lt;/mat-option&gt;
                              &lt;mat-option [value]="'United Kingdom'"&gt;
                                  United Kingdom
                              &lt;/mat-option&gt;
                              &lt;mat-option [value]="'Russia'"&gt;
                                  Russia
                              &lt;/mat-option&gt;
                              &lt;mat-option [value]="'China'"&gt;
                                  China
                              &lt;/mat-option&gt;
                              &lt;mat-option [value]="'Japan'"&gt;
                                  Japan
                              &lt;/mat-option&gt;
                              &lt;mat-option [value]="'Turkey'"&gt;
                                  Turkey
                              &lt;/mat-option&gt;
                          &lt;/mat-select&gt;
                          &lt;mat-icon matSuffix class="secondary-text"&gt;outlined_flag&lt;/mat-icon&gt;
                          &lt;mat-error&gt;Country is required!&lt;/mat-error&gt;
                      &lt;/mat-form-field&gt;
  
                  &lt;/div&gt; --&gt;
                  &lt;div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto"&gt;
  
  
  
  
                      &lt;mat-form-field appearance="outline" fxFlex="50" class="pr-4"&gt;
                          &lt;mat-label&gt;Input 1&lt;/mat-label&gt;
                          &lt;input matInput formControlName="Input1" required&gt;
                          &lt;mat-icon matSuffix class="secondary-text"&gt;account_circle&lt;/mat-icon&gt;
                          &lt;mat-error&gt; Input 1 is required!&lt;/mat-error&gt;
                      &lt;/mat-form-field&gt;
  
  
                      &lt;mat-form-field appearance="outline" fxFlex="50" class="pr-4"&gt;
                          &lt;mat-label&gt;Input 2&lt;/mat-label&gt;
                          &lt;input matInput formControlName="Input2" required&gt;
                          &lt;mat-icon matSuffix class="secondary-text"&gt;account_circle&lt;/mat-icon&gt;
                          &lt;mat-error&gt; Input 1 is required!&lt;/mat-error&gt;
                      &lt;/mat-form-field&gt;
  
  
  
                  &lt;/div&gt;
  
  
  
                  &lt;button mat-raised-button class='submitButton' style="background-color: #27803f;  color: white;"&gt;Submit
                      form&lt;/button&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  </code></pre>
  
  <p>The heading I want to put on my form looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/CE94e.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CE94e.jpg" alt="enter image description here"></a></p>
  
  <p>And my form looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/UnMLu.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UnMLu.jpg" alt="enter image description here"></a></p>
  
  <p>I tried putting card, but it didn't worked</p>