Ionic Cards: Ionic cards are a standard part of the user interface that acts as an entry point for more specific information. These are the best components for displaying information that’ll feel user-friendly. It can be a single component but often consists of a header, address, title, and content. <ion-card> is broken up into many sub-components to show this.

There are many sub-components of ionic cards i.e., ion-card-content, ion-card-header, ion-card-title, ion-card-subtitle.

ion-card-content

<ion-card> is the parent component of ion-card-content, and <ion-card-content> adds some content padding. It is suggested to add any text material for a card to be stored in an ion-card-content component.

Ion-card-header

It is a header component of the ion-card, which makes a header for the cards. You can add a header inside the card by using the <ion-card-header> component.

Ion-card-title

It is a child component of the ion-card, which adds the title for the cards. You can add a title inside the card by using the <ion-card-title> component.

Ion-card-subtitle

It is a child component of the ion-card, which adds the subtitles for the cards. You can add a subtitle inside the card by using the <ion-card-subtitle> component.

Example: The below example shows how the ionic card work with its sub-component.

Output: After executing this code, you will get the output, which is shown below.

After executing this code

Card images

You can easily add your app pictures inside the cards. The ion-card will give a fixed width and variable height of the image. You can also easily add headers, menus, and other card components with image cards.

You can add the image by using the following syntax:

Example: The below example shows how images work in the ionic card.

Output: After executing this code, you will get the output, which is shown below.

Card images

Cards list

It can contain a list of items. To show a list inside the content, you require to add the <ion-list> component.

Example:

The given below example shows how the list works in the ion-card component.

Output: After executing this code, you will get the output, which is shown below.

Cards list

Pin It on Pinterest

Share This