Ionic 5 Card Component Tutorial with Example

Last updated on by Digamber
In this Ionic 5 tutorial, we will learn how to use Ionic Card UI component to create a card to display the information to the users.

Cards have become quite a popular UI component over the years. A card shows data in a more organized manner.

Cards are handy and better from the user experience perspective to display more information on a small screen at once.

One of the best things which i like most about Ionic 5 is that it offers tons of UI components to create a beautiful layout for a hybrid mobile application.

A card is a single component, and displays useful information that helps users to make their decisions quickly.

Create Ionic 5 Application

Generate a new blank Ionic 5 application by running the following command.

ionic start ionic-card-example blank --type=angular

Run the following command to head over to the application folder.

cd ionic-card-example

For testing the app in the browser, install lab mode as a dev-dependency.

npm i @ionic/lab --save-dev

Run the app in the browser.

ionic serve -l

Ionic 5 Card Example

Cards are the most essential piece of UI and created using the following sub-components.

  • Regular Cards
  • Card Headers
  • Card Images
  • Card Footer

Let’s check out these sub-components.

Regular Cards

Cards are built using HTML and CSS, creating a regular card so simple.

 <ion-card>
    <ion-card-header>
      Card Header
    </ion-card-header>
    <ion-card-content>
      <p>Content goes here</p>
    </ion-card-content>
  </ion-card>

Card Header

Card header is created with ion-card-header UI component and It is needed to declare to insert the Header in card.

Here is simple example of card headers.

 <ion-card>
    <ion-card-header>
      Card Header
    </ion-card-header>
    <ion-card-content>
      <p>Content goes here</p>
    </ion-card-content>
  </ion-card>

Image in Card

Define the HTML img tag inside the ion-card tag to show the image in the card.

<ion-card>
    <img src="../../assets/hotel.jpeg" alt="ion">
</ion-card>

Footer in Card

Add the ion-footer inside the ion-card, It shows the extra meta information in the bottom of the card.

<ion-card>
    <ion-card-header>
        <ion-card-title>Hotel Panama Garden</ion-card-title>
      </ion-card-header>
      
    <ion-footer>
      <ion-row>
        <ion-col center text-center>
          <button>
            <ion-icon name="thumbs-up"></ion-icon>
            <div>1.5k Likes</div>
          </button>
        </ion-col>
        <ion-col center text-center>
          <button>
            <ion-icon name="text"></ion-icon>
            <div>4 Comments</div>
          </button>
        </ion-col>
        <ion-col center text-center>
          <button>
            <ion-icon name="time"></ion-icon>
            <div>11h ago</div>
          </button>
        </ion-col>
      </ion-row>
    </ion-footer>
  </ion-card>

Full Card Example

Let’s combine all the sub-component and create an article card to organize the multi information in more pleasing manner.

<ion-card>
  <ion-item>
    <ion-avatar slot="start">
      <img src="../../assets/user.jpg">
    </ion-avatar>
    <ion-label>
      <h3>John Doe</h3>
      <p>Dec 10, 2019</p>
    </ion-label>
  </ion-item>

  <img src="../../assets/hotel.jpeg" alt="ion">
  <ion-card-header>
    <ion-card-title>Hotel Panama Garden</ion-card-title>
  </ion-card-header>
  <ion-card-content>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus iaculis mollis ligula sed ultrices.
  </ion-card-content>

  <ion-footer>
    <ion-row>
      <ion-col center text-center>
        <button>
          <ion-icon name="thumbs-up"></ion-icon>
          <div>1.5k Likes</div>
        </button>
      </ion-col>
      <ion-col center text-center>
        <button>
          <ion-icon name="text"></ion-icon>
          <div>4 Comments</div>
        </button>
      </ion-col>
      <ion-col center text-center>
        <button>
          <ion-icon name="time"></ion-icon>
          <div>11h ago</div>
        </button>
      </ion-col>
    </ion-row>
  </ion-footer>
</ion-card>

Card is created combining header, title, subtitle, and content. The ion-card is divided into various sub-components to show the user-friendly information.

Ionic 5 cards are a great way to display information in an organized way. Cards are used widely by the top companies, such as twitter and google.

Cards size auto-adjust based on the device size even left, or Cards can also support right swipe.

Ionic 5 Card Example