Ionic Cards

To organize information in mobile devices cards are great way. They contain our content in a well organize manner. To display so much content and information at once we use ionic cards. As we know that mobile devices have smaller screen size and to display information on that devices cards are the best ionic component to show such type of data or information. The design pattern of cards adopts many companies such as Google and Twitter.

How to add card component

Ionic cards can be added by defining card class in a div or using <ion-card> tag. Cards are usually formed as list with item class. Here we use two additional classes, item and item with text-wrap class. And we wrap this additional classes (item item-text-wrap) with our card class to display cards. Below are the code snippet to create ionic cards with or without text wrap.

      <ion-content>
        <ion-card>            
          <ion-item class="item">
            Ionic card example that display information without item-text-wrap class.
          </ion-item>
          <ion-item class="item item-text-wrap">
            Ionic card example that display information with item-text-wrap class. This 
            class will wraps the content.
          </ion-item>            
        </ion-card>
      </ion-content>

Card Header & Footer

You can wrap your card content or information between header and footer. It means you can easily create your card data inside Header and Footer. And here we are going to achieve this by using our old ionic class friend item item-divider. If you don't know what they are please read this tutorial Ionic List. Below code snippet will create cards with header and footer.

Recommend:

How to load data dynamically in ionic list component

How to create and use button component in ionic

How to create and use form component in ionic

      <ion-content>
        <ion-card>            
          <ion-item class="item item-divider">
            Your Header goes here.
          </ion-item>
          <ion-item class="item item-text-wrap">
            Ionic card Header and Footer example.
          </ion-item>
          <ion-item class="item item-divider">
            Your Footer goes here.
          </ion-item>                      
        </ion-card>
      </ion-content>

Card Image

You can add image in ionic card element. To add an image we use item item-image class in <ion-item> element, and within this tag we use image tag <img>.

      <ion-content>
        <div class="list card">
          <ion-card>            
            <ion-item class="item">
              Title goes here.
            </ion-item>
            <ion-item class="item item-image">
              <img src="image.jpg">
            </ion-item>                      
          </ion-card>
        </div>
      </ion-content>