Modified to use angular material cards

src/app/app.module.ts

@@ -3,7 +3,7 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MatButtonModule, MatCheckboxModule } from '@angular/material';
+import { MatButtonModule, MatCheckboxModule, MatCardModule } from '@angular/material';
 
 import { AppRoutingModule } from './app-routing/app-routing.module';
 
@@ -62,7 +62,8 @@ import { HomeComponent } from './content/image-container/home/home.component';
     AppRoutingModule,
     BrowserAnimationsModule,
     MatButtonModule,
-    MatCheckboxModule
+    MatCheckboxModule,
+    MatCardModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/content/image-container/image/image.component.html

@@ -1,16 +1,17 @@
-<div class="card">
-  <img class="card-img-top" src="{{image.imageUrl}}" alt="Card image cap">
-  <div class="card-body">
-    <h5 class="card-title">{{image.imageTitle}}</h5>
-    <p class="card-text">{{image.imageDescription}}</p>
-  </div>
-  <ul class="list-group list-group-flush">
-    <li class="list-group-item">Cras justo odio</li>
-    <li class="list-group-item">Dapibus ac facilisis in</li>
-    <li class="list-group-item">Vestibulum at eros</li>
-  </ul>
-  <div class="card-body">
-    <a href="#" class="card-link">Card link</a>
-    <a href="#" class="card-link">Another link</a>
-  </div>
-</div>
+<mat-card class="example-card">
+  <mat-card-header>
+    <div mat-card-avatar class="example-header-image"></div>
+    <mat-card-title>{{ image.imageTitle }}</mat-card-title>
+    <mat-card-subtitle>{{ image.imageCateogry }}</mat-card-subtitle>
+  </mat-card-header>
+  <img mat-card-image src="{{ image.imageUrl }}" alt="Photo of a Shiba Inu">
+  <mat-card-content>
+    <p>
+      {{ image.imageDescription }}
+    </p>
+  </mat-card-content>
+  <mat-card-actions>
+    <button mat-button>LIKE</button>
+    <button mat-button>SHARE</button>
+  </mat-card-actions>
+</mat-card>

src/app/content/image-container/image/image.component.scss

@@ -8,4 +8,13 @@
     width: 20rem;
     margin: 20px auto;
     overflow: auto
+}
+
+.image-card {
+    max-width: 400px;
+}
+
+.image {
+    background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
+    background-size: cover;
 }