<ion-header>
  <ion-toolbar>
    <ion-title>Virtual Scroll: Cards</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

  <div [virtualScroll]="items" approxItemHeight="320px">

    <ion-card *virtualItem="let item; let itemBounds = bounds;">

      <div>
        <ion-img [src]="item.imgSrc" [height]="item.imgHeight" [alt]="item.name" [bounds]="itemBounds"></ion-img>
      </div>

      <ion-item>
        <ion-avatar item-start>
          <ion-img [src]="item.avatarSrc" height="40" width="40" [bounds]="itemBounds"></ion-img>
        </ion-avatar>
        <h2>{{ item.name }}</h2>
      </ion-item>

      <ion-card-content>
        {{ item.content }}
      </ion-card-content>

    </ion-card>

  </div>

</ion-content>
