[Ionic] Components Cards

app.component.ts

this.pages = [
    { title: 'Action Sheet', component: ActionSheetPage },
    { title: 'Alerts', component: AlertsPage },
    { title: 'Buttons', component: ButtonsPage },
    { title: 'Cards', component: CardsPage}
];

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { ActionSheetPage } from '../pages/action-sheet/action-sheet';
import { AlertsPage } from '../pages/alerts/alerts';
import { ButtonsPage } from '../pages/buttons/buttons';
import { CardsPage } from '../pages/cards/cards';
import { BgImageCardsPage } from '../pages/cards/bg-cards/bg-cards';
import { SocialCardsPage } from '../pages/cards/social-cards/social-cards';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    ActionSheetPage,
    AlertsPage,
    ButtonsPage,
    CardsPage,
      BgImageCardsPage,
      SocialCardsPage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    ActionSheetPage,
    AlertsPage,
    ButtonsPage,
    CardsPage,
      BgImageCardsPage,
      SocialCardsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

cards.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Cards</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button block (click) = "openBgImageCardPage()">
    Background Image Cards
  </button>
  <button ion-button block (click) = "openSocialCardPage()">
    Social Cards
  </button>
</ion-content>

cards.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { BgImageCardsPage } from './bg-cards/bg-cards';
import { SocialCardsPage } from './social-cards/social-cards';

@Component({
    templateUrl: 'cards.html'
})
export class CardsPage {
    constructor(public navCtrl: NavController) {

    }

    openBgImageCardPage() {
        this.navCtrl.push(BgImageCardsPage);
    }

    openSocialCardPage() {
        this.navCtrl.push(SocialCardsPage);
    }
}

bg-cards/bg-cards.html

bg-cards/bg-cards.scss

bg-cards/bg-cards.ts

social-cards/social-cards.html

social-cards/social-cards.ts