Ionic Cards
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.
Card Life goal Focus on your goal When he can change his inner consciousness to the way he can serve others, and when he makes this the focus of his life, he will be in a position to know the true miracles in his progress towards prosperity.
Output: After executing this code, you will get the output, which is shown below.
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.
Card 
“Beautiful things happen when you distance yourself from negativity.” Achieving a goal “Do something every day to move toward your goal. Get going and keep going. Just do it.”
Output: After executing this code, you will get the output, which is shown below.
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.
<ion-header> <ion-toolbar> <ion-title> Card List </ion-title> </ion-toolbar> </ion-header> <ion-card> <ion-card-header> Explore Nearby </ion-card-header> <ion-list> <p><button ion-item> <ion-icon name="cart" item-start color="success"></ion-icon> Shopping Button</button></p> <p><button ion-item> <ion-icon name="cafe" item-start color="warning"></ion-icon> Cafe Button</button></p> <p><button ion-item> <ion-icon name="film" item-start color="danger"></ion-icon> movie Button</button></p> <p><button ion-item> <ion-icon name="medical" item-start color="light"></ion-icon> Hospital Button</button></p> <p><button ion-item> <ion-icon name="planet" item-start color="secondary"></ion-icon> Space Button</button></p> <p><button ion-item> <ion-icon name="beer" item-start color="tertiary"></ion-icon> Pub Button</button></p> </ion-list> </ion-card>
Output: After executing this code, you will get the output, which is shown below.
