Each post

post.html

<div class="full-frame">

  <div class="image-section">
   <img [src]="defaultImage">
  </div>

  <div class="text-section">
    <div class="text-section-row row0">
      <span>{{imageData.name}}</span>
    </div>

    <div *ngIf="imageData.creationDate" class="text-section-row row1">
      <span>Posted on: {{imageData.creationDate | date: 'MM/dd/yy'}}</span>
    </div>

    <div *ngIf="imageData.uploadedBy && displayPostedBy" class="text-section-row row2">
      <span>Posted by: {{imageData.uploadedBy.name}} </span>
    </div>

    <div *ngIf="imageData.favoriteCount >= 0" class="text-section-row row3">
      <span># of Fav: {{imageData.favoriteCount}}</span>
    </div>

    <div class="text-section-row row4 action-row hvr-grow" *ngIf="displayFavoritesButton">
      <span (click)="onFavoritesClicked()">
        <span class="glyphicon glyphicon-glass"></span>
        Add img to Favorites
      </span>
    </div>

    <div class="text-section-row row5 action-row hvr-grow" *ngIf="displayFollowButton">
      <span (click)="onFollowClicked()">
        <span class="glyphicon glyphicon-tags"></span>
        Follow User
      </span>
    </div>
  </div>

</div>

.full-frame{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  border: 1px solid #dcd5d3;
  border-radius: 5px;
  width: 150px;
}

img{
  padding: 2px;
  height: 150px;
  width: 150px;

}

.text-section {
  border-top: 1px solid #dcd5d3;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.text-section-row {
  min-height: 25px;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  font-size: 10px;
}
.text-section-row span {
  padding: 5px;
}

.row0 {
  background-color: black;
  color: white;
}

.row1{
 background-color: aliceblue;
}

.row2{
  background-color: aquamarine;
}

.row3{
  background-color: bisque;
}

.row5{
  background-color: darkkhaki;
}

.action-row {
  cursor: pointer;
}