Share the post

Hello All, In this topic we will discuss about <ion-list> & <ion-card>. The list in Ionic can be shown by <ion-list> tag & card can be shown by <ion-card>. Later, we will see the example of implementation ionic 4 lists & cards. We will also see what are the different things which we can include inside the list & card so that our list items & card data look more attractive.

Ionic List :

Ionic list can be displayed by using <ion-list></ion-list> tag. Please find below example for more details :  

        <ion-avatar slot="start">
          <img src="../../assets/icon/favicon.png" />
          <h2> Software Dev </h2>
          <h3> Languages </h3>
          <p> .net </p>
          <p> java </p>

Output :


In the above example, We can add the different shapes of images by using different tags in ionic.  

  • <ion-avatar></ion-avatar> : for round image
  • <ion-thumbnail></ion-thumbnail> : for square image

  Also, we can able to add <h2>, <h3>, <p> , tags inside <ion-item> tag. You can add different item-option. Please see this link for more details.

Ionic Card :

The ionic card can be implemented by using a tag.

Please see below example for more details :


this is sample text.

Output :


As seen in the above example ion-card-header is used for title & subtitle whereas an ion-card-content is used for the content of the card.

Leave a Comment