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.

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.


  
  
  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.

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.

 <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.

Cards list