Css 创建离子卡列表

我正在尝试使用angular在Ionic 5上创建联系人列表，但无法访问此样式。我是爱奥尼亚的初学者，你能帮我吗？ 如何将渲染图像保留在卡的开头，带有图标和标题以及带有副标题的图标，如下图所示

我的形象：

我的代码：

    <ion-content padding>
  <ion-card>
    <ion-grid>
     <ion-row>
      <ion-col>
    <img src="https://material.angular.io/assets/img/examples/shiba1.jpg" style="border-radius: 50%; width: 80%; height: 85%">
    </ion-col>
    <ion-col>
    <ion-item>
      <h2>Marty McFly</h2>
    </ion-item> 
    <ion-card-content>
      <p>Wait a minute. Wait a minute, Doc. Uhhh</p>
    </ion-card-content>
    </ion-col>
     </ion-row>
    </ion-grid>

  </ion-card>
  </ion-content>

马蒂·麦克弗利
等一下。等等，医生。嗯

---

谢谢=）

您可以使用离子项目列表。他们提供了一个圆形的头像来开始这个项目，然后是一个标签，你可以修改它来获取你想要的结果