How can I make my Ionic list look like this?

Issue

I'm new to Ionic and Angular and I'm trying to achieve a certain look for my Ionic list. I want to make my list items look like cards in a way. Here are two examples of what I mean:

First Example

Second Example

So far I tried to use ion-cards, but I couldn't make them look that way. I also tried getting a normal ion-list, but I have no idea how I would shape the items to look like wanted.

Progress

 <ion-list>
 <ion-item *ngFor="let item of items">
   <ion-avatar slot="start">
     <img src="assets/icon/favicon.png">
   </ion-avatar>
   <ion-label>
     <ion-grid>
       <ion-row>
         <ion-col size="12">
           <ion-label>{{item.text}}</ion-label>
         </ion-col>
       </ion-row>
       <ion-row>
         <ion-col size="2">
           <ion-label>+</ion-label>
         </ion-col>
         <ion-col size="10">
           <ion-label>{{item.text2}}</ion-label>
         </ion-col>
       </ion-row>
     </ion-grid>
   </ion-label>
 </ion-item>
</ion-list>

I used this so far as a reference Create Ionic card List

Thanks in advance for any help!

Solution

I would strongly recommend you to use the ionic-team's 2021 conference app source code for your reverence. Its filled with useful examples of lists you can use in your app.

Answered By - mahen23