Ionic 6 Card UI Component Example Tutorial

This simple tutorial explains how to create card component UI in the Ionic Angular application using the ion-card attribute.

Cards is an essential user-interface component that helps show valuable and vital information to the user immaculately and exquisitely.

As far as user experience is concerned, Cards also play a vital role in engaging users by sharing information more compactly.

Generically, we visit social media sites regularly. You also see cards that hold tons of information in a proper visual hierarchy; managing tons of data within a small card is tricky but however it is the best way to show information to user.

Ionic is a robust platform that comes with numerous reusable user-interface components, with which you can create a beautiful app quickly. Out of those powerful components, we will look at the Ionic card component.

How to Add Card in Ionic 6

  • Step 1: Install Ionic App
  • Step 2: Card Anatomy
  • Step 3: Create Simple Card
  • Step 4: Create Complete Card
  • Step 5: Change Card Color
  • Step 6: Disable Card
  • Step 7: Card Mode
  • Step 8: Run Ionic App

Install Ionic App

Open terminal and type the following command in the command prompt to create an Ionic angular app:

ionic start demo-app blank --type=angular

Go inside the app directory:

cd demo-app

Remove Type Errors

You have to remove strict type errors make sure to set “strictTemplates”: false in angularCompilerOptions in tsconfig.json file.

Card Anatomy

The ion-card attribute creates the ionic card. Cards are a classic piece of UI that serves as an entry point to more detailed information.

Cards lay down the foundation of displaying extensive information to the user, and it also evokes way to good UI that cares about the user. The ionic card comprises a few sub-components, and those are:

  • ion-card-content
  • ion-card-header
  • ion-card-title
  • ion-card-subtitle

Create Simple Card

Creating a simple card in ionic is quick and easy; you need to define the ion-card attribute in any ionic HTML page. Then, you can add ion-header, card title and subtitle section to create a complete card.

<ion-card class="ios hydrated">
    <img src="https://via.placeholder.com/300">

    <ion-card-header class="ion-inherit-color ios hydrated">
        <ion-card-subtitle>Subtitle</ion-card-subtitle>
        <ion-card-title>Orci varius</ion-card-title>
    </ion-card-header>

    <ion-card-content>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </ion-card-content>
</ion-card>

Create Complete Card

In the previous example, we learned how to create an essential card in Ionic. We will show you how to go one step further and create a comprehensive card UI component.

Update code in Ionic’s HTML page file:

<ion-card>
    <ion-item>
        <ion-avatar slot="start">
            <img src="https://via.placeholder.com/300">
        </ion-avatar>
        <ion-label>
            <h3>Bucky Barnes</h3>
            <p>Mar 20, 2021</p>
        </ion-label>
    </ion-item>

    <img src="https://via.placeholder.com/290" alt="Image">
    <ion-card-header>
        <ion-card-title>Main Title</ion-card-title>
    </ion-card-header>
    <ion-card-content>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </ion-card-content>

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

Change Card Color

You can change or update the card colour by using any of the predefined color classes.

  • “primary”
  • “secondary”
  • “tertiary”
  • “success”
  • “warning”
  • “danger”
  • “light”
  • “medium”
  • “dark”
<ion-card color="tertiary">
    <ion-card-header>
    </ion-card-header>

    <ion-card-content>
    </ion-card-content>

    <ion-footer>
    </ion-footer>
</ion-card>

Disable Card

To revoke the user’s interaction with the ionic card enable the disable state in card. Hence, add a disabled attribute to the ion-card directive; by default, it is false, so when added, it turns on to true.

<ion-card disabled>
    ...

    ...

    ...
</ion-card>

Card Mode

The mode property allows you to invoke device-specific style. You may use the mode=”” attribute and choose either ios or md type.

<ion-card mode="ios">
    ...

    ...

    ...
</ion-card>

Run Ionic App

Although we can test the card on the virtual or real device, we are checking it in the browser.

Next, execute the command to add the lab package.

npm i @ionic/lab --save-dev

Finally, run the application:

ionic serve -l

Ionic card example

Conclusion

We had a chance to create a basic card, visually appealing full card, understood sub-components of the card; we also looked at how to add colour and how to disable the card component.

To test out more properties and methods check Ionic card documentation.