
<ion-content>
  <div class="bg_image back_image" [style.backgroundImage]="'url(https://www.wrenchboard.com/assets/images/apps/p4.jpg)'">
    <div class="ion-padding">
      <ion-icon slot="start" name="arrow-back" class="back" (click)="onBack()"></ion-icon>
    </div>
  </div>

  <div class="ion-padding">
    <div class="flex">
      <ion-label class="bold_text">Blog</ion-label>
    </div>

    <div class="row">
<!--      <ion-label class="bg_text">3D Design</ion-label>-->
<!--      <div class="rate">-->
<!--        <ion-icon name="star-half-outline" color="warning"></ion-icon>-->
<!--        <ion-label class="review">4.8 (4478 reviews)</ion-label>-->
<!--      </div>-->
    </div>
    <ion-grid>
      <ion-row>
        <ion-col size="6" size-md="4" size-lg="2"  *ngFor="let item of blogData; let i = index" (click)="blogDetails(item)" >
          <ion-card >
            <img alt="{{item.post_title}}" src="https://blog.wrenchboard.com/wp-content/uploads/{{item.meta_value}}" />
            <ion-card-content class="blog_text">
              {{item.post_title}}
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <div class="button" (click)="onBack()">
      <ion-label class="text">Return</ion-label>
    </div>
  </ion-toolbar>
</ion-footer>
