angular Material card not recognised

Question

I'm using angular 13.0.1. I've made a reference to angular material 13.0.1 as well.

In my app.module.ts file I have:

import { MatCardModule } from '@angular/material/card';
import { MatCommonModule, MatRippleModule } from '@angular/material/core';

and then declared in the imports: section.

I have the following on my login.component.html

<mat-card>
  <mat-card-content>
<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <h2>Log In</h2>
  <mat-error *ngIf="loginInvalid">
    The username and password were not recognised
  </mat-error>
  <mat-form-field class="full-width-input">
    <input matInput placeholder="Email" formControlName="username" required>
    <mat-error>
      Please provide a valid email address
    </mat-error>
  </mat-form-field>
  <mat-form-field class="full-width-input">
    <input matInput type="password" placeholder="Password" formControlName="password" required>
    <mat-error>
      Please provide a valid password
    </mat-error>
  </mat-form-field>
  <button mat-raised-button color="primary">Login</button>
</form>
</mat-card-content>
</mat-card>

I then receive a compilation error:

'mat-card' is not a known element:

and this continues for all the material elements. Looking at the Material documentation, I cant see why I'm receiving this error.