Search code examples
ionic2ionic3

How to create a footer on ion-card


How to craete footer on ion-card. Tried these example as below but not working.please help

.Html

<ion-card class="dashboardgraph">
    <ion-card-header class="cardheader">
      CNC 10
     </ion-card-header> 
    <ion-footer class="cardfooter">
      footer here ///    
     </ion-footer>
</ion-card>

Solution

  • You need to use ion-col and ion-row in ion-card.It works.

    <ion-content fullscreen>
      <ion-card>
       <ion-card-header class="cardheader">
          CNC 10
        </ion-card-header> 
    
        <ion-card-content>
         Content of the card
        </ion-card-content>
    
        <ion-row class="cardfooter">
          <ion-col>
                <p>Footer goes here </p>
          </ion-col>
        </ion-row>
      </ion-card>
    </ion-content>