Ionic 2 Cards

admin

8 years ago

Ionic 2 Cards : Cards are basically used to display the important pieces of content, and emerging as the core design pattern for apps. Cards are great way to display the information in organised format. Cards are widely used by companies like – google, twitter and have become one of the most popular design pattern. Here in this tutorial we are going to explain how to create cards in Ionic 2. You can also use our Online tool to run the example and see the output.

Ionic 2 Cards Example

Cards are important component of the apps, it allows to display the same information on different size of screens. It is very simple to create Cards in Ionic 2. Let us understand the cards one by one-

1. Basic Cards
2. Card Headers
3. Card Lists
4. Card Images
5. Background Images
6. Advanced Cards

Let us go one by one to understand the Ionic 2 Cards-

Basic Cards

Cards are basically css component. You can create basic cards simply as below-

Basic Card Header Example

<ion-card>
<ion-card-header>
My Card Header
</ion-card-header>
<ion-card-content>
<p>My Card Content …</p>
</ion-card-content>
</ion-card>

Try it »

The output of the above example will look something like this –

Card Headers

ion-card-header component is used to add the Header in card. Here is simple example of card headers-

Card Headers Example

<ion-card>
<ion-card-header>
Tutorialsplane.com
</ion-card-header>
<ion-card-content>
<p>Learn More …</p>
</ion-card-content>
</ion-card>

Try it »

The output of the above example will look something like this –

Lists In Cards

ion-list component is used to create card lists in Ionic 2. Here is simple example of Lists In Cards-

Lists In Card Headers Example

<ion-card>
  <ion-card-header>
    What are you Looking For?
  </ion-card-header>
  <ion-list>
    <button ion-item>
      <ion-icon name="cafe"></ion-icon> Cafe
    </button>
    <button ion-item>
      <ion-icon name="cart"></ion-icon> Shopping 
    </button>
    <button ion-item>
      <ion-icon name="medical" ></ion-icon> Hospital
    </button>
    <button ion-item>
      <ion-icon name="bus"></ion-icon> Bus Stand
    </button>
    <button ion-item>
      <ion-icon name="train" ></ion-icon> Railway Station
    </button>
    <button ion-item>
      <ion-icon name="plane"></ion-icon> Airport
    </button>    
   </ion-list>
</ion-card>

Try it »

The output of the above example will look something like this –

Images In Cards

We sometimes need to add images in cards, It is very simple to add images in Cards. Here is an example of Images in Cards.

Ionic 2 Card Images Example

<ion-card>
  <img src="//tutorialsplane.com/wp-content/uploads/2017/01/cothach-1790701_640.jpg"/>
  <ion-card-content>
    <ion-card-title>
      Cards Images
      </ion-card-title>
    <p>
      You are learning using tutorialsplane.com Online Editor. Learn More & Enjoy!
    </p>
  </ion-card-content>
</ion-card>

Try it »

The output of the above example will look something like this –

Background Images In Cards

You can set background images in Cards simply adding the image source url as below-

Background Images in Cardss Example

<ion-content class="card-background-page">

  <ion-card>
    <img src="//tutorialsplane.com/wp-content/uploads/2017/01/ace-1807511__340.jpg"/>
    <div class="card-title">Image Title 1</div>
    <div class="card-subtitle">Subtitle 1</div>
  </ion-card>a

  <ion-card>
    <img src="//tutorialsplane.com/wp-content/uploads/2017/01/norway-1758183__340.jpg"/>
    <div class="card-title">Image Title 2</div>
    <div class="card-subtitle">Subtitle 2</div>
  </ion-card>

  <ion-card>
    <img src="//tutorialsplane.com/wp-content/uploads/2017/01/tomato-1862857__340.jpg"/>
    <div class="card-title">Image Title 3</div>
    <div class="card-subtitle">Subtitle 3</div>
  </ion-card>
</ion-content>

Try it »

The css used in the above example is given below, please don’t forget to add this to add the styles for title and subtitle.

Card Background Image Css:

.card-background-page {

  ion-card {
    position: relative;
    text-align: center;
  }

  .card-title {
    position: absolute;
    top: 37%;
    font-size: 2.0em;
    width: 100%;
    font-weight: bold;
    color: #fff;
  }

  .card-subtitle {
    font-size: 1.0em;
    position: absolute;
    top: 53%;
    width: 100%;
    color: #fff;
  }

}

The output of the above example will look something like this –