How to add heading to the form?

Question

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

<div id="forms" class="page-layout simple fullwidth" fxLayout="column">
    <div class="content p-24">
        <div class="mb-24" fxLayout="column" fxLayoutAlign="start" fxLayout.gt-md="row">

            <form class="mat-card mat-elevation-z4 p-24 mr-24" fxLayout="column" fxLayoutAlign="start" fxFlex="1 0 auto" name="form" [formGroup]="form">
                <!-- <mat-card>New sales person</mat-card> -->
                <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">

                    <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                        <mat-label>ID</mat-label>
                        <input matInput formControlName="company">
                        <mat-icon matSuffix>domain</mat-icon>
                    </mat-form-field>


                    <mat-form-field appearance="outline" fxFlex="50" class="pr-4">
                        <mat-label>Name</mat-label>
                        <input matInput formControlName="firstName" required>
                        <mat-icon matSuffix class="secondary-text">account_circle</mat-icon>
                        <mat-error> Name is required!</mat-error>
                    </mat-form-field>


                    <mat-form-field appearance="outline" fxFlex="50" class="pr-4">
                        <mat-label>Gender</mat-label>
                        <mat-select>
                            <mat-option>
                                Male
                            </mat-option>
                            <mat-option>
                                Female
                            </mat-option>
                            <mat-option>
                                Rather Not to say.
                            </mat-option>
                        </mat-select>
                    </mat-form-field>

                </div>


                <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">

                    <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                        <input type='number' matInput name="" id="" placeholder="Phone">
                        <mat-icon matSuffix>phone</mat-icon>
                    </mat-form-field>


                    <mat-form-field appearance="outline" fxFlex="50" class="pr-4">
                        <input type='email' matInput name="" id="" placeholder="Email">
                        <mat-icon matSuffix>email</mat-icon>
                    </mat-form-field>

                </div>


                <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">

                    <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                        <input type='text' matInput name="" id="" placeholder="Team">
                    </mat-form-field>


                    <mat-form-field appearance="outline" fxFlex="50" class="pr-4">
                        <input type='text' matInput name="" id="" placeholder="Team Leader">
                    </mat-form-field>

                </div>





                <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">

                    <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                        <mat-label>County</mat-label>
                        <mat-select>
                            <mat-option>
                                Lorem.
                            </mat-option>
                            <mat-option>
                                Lorem.
                            </mat-option>
                            <mat-option>
                                Lorem.
                            </mat-option>
                            <mat-option>
                                Lorem.
                            </mat-option>
                        </mat-select>
                    </mat-form-field>



                    <mat-form-field appearance="outline" fxFlex="50" class="pr-4">
                        <mat-label>Sub County</mat-label>
                        <mat-select>
                            <mat-option>
                                Lorem.
                            </mat-option>
                            <mat-option>
                                Lorem.
                            </mat-option>
                            <mat-option>
                                Lorem.
                            </mat-option>
                            <mat-option>
                                Lorem.
                            </mat-option>
                        </mat-select>
                    </mat-form-field>


                </div>




                <div fxLayout="row wrap" fxLayoutAlign="start center" fxFlex="1 0 auto">

                    <mat-form-field appearance="outline" fxFlex="100">
                        <mat-label>Physical Address</mat-label>
                        <textarea matInput formControlName="address" required>

                        </textarea>
                        <mat-error>Address is required!</mat-error>
                    </mat-form-field>

                    <mat-form-field appearance="outline" fxFlex="100">
                        <mat-label>Additional Information </mat-label>
                        <textarea matInput formControlName="address2"></textarea>
                        <mat-error>Additional is required!</mat-error>
                    </mat-form-field>

                </div>


                <!-- 
                <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">

                    <mat-form-field appearance="outline" fxFlex="100">
                        <mat-label>Country</mat-label>
                        <mat-select formControlName="country" required>
                            <mat-option [value]="'United States of America'">
                                United States of America
                            </mat-option>
                            <mat-option [value]="'United Kingdom'">
                                United Kingdom
                            </mat-option>
                            <mat-option [value]="'Russia'">
                                Russia
                            </mat-option>
                            <mat-option [value]="'China'">
                                China
                            </mat-option>
                            <mat-option [value]="'Japan'">
                                Japan
                            </mat-option>
                            <mat-option [value]="'Turkey'">
                                Turkey
                            </mat-option>
                        </mat-select>
                        <mat-icon matSuffix class="secondary-text">outlined_flag</mat-icon>
                        <mat-error>Country is required!</mat-error>
                    </mat-form-field>

                </div> -->
                <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">




                    <mat-form-field appearance="outline" fxFlex="50" class="pr-4">
                        <mat-label>Input 1</mat-label>
                        <input matInput formControlName="Input1" required>
                        <mat-icon matSuffix class="secondary-text">account_circle</mat-icon>
                        <mat-error> Input 1 is required!</mat-error>
                    </mat-form-field>


                    <mat-form-field appearance="outline" fxFlex="50" class="pr-4">
                        <mat-label>Input 2</mat-label>
                        <input matInput formControlName="Input2" required>
                        <mat-icon matSuffix class="secondary-text">account_circle</mat-icon>
                        <mat-error> Input 1 is required!</mat-error>
                    </mat-form-field>



                </div>



                <button mat-raised-button class='submitButton' style="background-color: #27803f;  color: white;">Submit
                    form</button>
            </form>
        </div>
    </div>
</div>

The heading I want to put on my form looks like this:

And my form looks like this:

I tried putting card, but it didn't worked

Answer 1

Here I have the mat-card edited for your wishes: https://stackblitz.com/edit/angular-qvnzza

Answer 2

I'm assuming you want to add a heading with CSS only. You can do that with this CSS:

#forms:before {
    content: 'This is your heading';
    background: #00398e;
    width: 100%;
    display: block;
    padding: 10px 20px;
    color: white;
    font-family: Arial;
    font-size: 26px;
}

Or try this:

form.mat-card.mat-elevation-z4:before {
    content: 'This is your heading';
    background: #00398e;
    width: 100%;
    display: block;
    padding: 10px 20px;
    color: white;
    font-family: Arial;
    font-size: 26px;
}

Or if you want to add it into your HTML perhaps using md-toolbar:

<md-card>
  <md-toolbar color="primary">
    <span>Title</span>
  </md-toolbar>

Or this:

   <md-card-header>
      <md-card-title>Your title goes here</mat-card-title>
   </md-card-header>

https://material.angularjs.org/latest/api/directive/mdCard