How to use @angular2-material/card - 10 common examples

this.submitted = true;
        this.messages.push(this.message);
    };
    Object.defineProperty(ContactComponent.prototype, "diagnostic", {
        // TODO: Remove this when we're done
        get: function () { return JSON.stringify(this.message); },
        enumerable: true,
        configurable: true
    });
    ContactComponent = __decorate([
        core_1.Component({
            moduleId: module.id,
            selector: 'contact-us',
            templateUrl: 'contact.component.html',
            styleUrls: ['contact.component.css'],
            directives: [button_1.MD_BUTTON_DIRECTIVES, card_1.MD_CARD_DIRECTIVES, icon_1.MD_ICON_DIRECTIVES, input_1.MD_INPUT_DIRECTIVES]
        }), 
        __metadata('design:paramtypes', [angularfire2_1.AngularFire])
    ], ContactComponent);
    return ContactComponent;
}());
exports.ContactComponent = ContactComponent;

MdRippleModule,
    MdSidenavModule,
    MdSliderModule,
    MdSlideToggleModule,
    MdTabsModule,
    MdToolbarModule,
    MdTooltipModule,
    OverlayModule,
    PortalModule,
    RtlModule,
];

@NgModule({
    imports: [
        MdButtonModule.forRoot(),
        MdCardModule.forRoot(),
        MdCheckboxModule.forRoot(),
        MdGridListModule.forRoot(),
        MdInputModule.forRoot(),
        MdListModule.forRoot(),
        MdProgressBarModule.forRoot(),
        MdProgressCircleModule.forRoot(),
        MdRippleModule.forRoot(),
        MdSidenavModule.forRoot(),
        MdTabsModule.forRoot(),
        MdToolbarModule.forRoot(),
        PortalModule.forRoot(),
        RtlModule.forRoot(),

        // These modules include providers.
        MdButtonToggleModule.forRoot(),
        MdIconModule.forRoot(),

function TeamComponent(teamService, titleService) {
        this.teamService = teamService;
        this.titleService = titleService;
    }
    TeamComponent.prototype.ngOnInit = function () {
        this.team = this.teamService.getTeam();
        this.titleService.setTitle('About Team');
    };
    TeamComponent = __decorate([
        core_1.Component({
            moduleId: module.id,
            selector: 'about-team',
            templateUrl: 'team.component.html',
            styleUrls: ['team.component.css'],
            providers: [team_service_1.TeamService],
            directives: [card_1.MD_CARD_DIRECTIVES]
        }), 
        __metadata('design:paramtypes', [team_service_1.TeamService, platform_browser_1.Title])
    ], TeamComponent);
    return TeamComponent;
}());
exports.TeamComponent = TeamComponent;

};
    CompaniesListComponent.prototype.gotoDetail = function (company) {
        var link = ['/companies/', company.$key];
        this.router.navigate(link);
    };
    __decorate([
        core_1.Input(), 
        __metadata('design:type', angularfire2_1.FirebaseListObservable)
    ], CompaniesListComponent.prototype, "companies", void 0);
    CompaniesListComponent = __decorate([
        core_1.Component({
            moduleId: module.id,
            selector: 'companies-list',
            templateUrl: 'companies-list.component.html',
            styleUrls: ['companies-list.component.css'],
            directives: [card_1.MD_CARD_DIRECTIVES]
        }), 
        __metadata('design:paramtypes', [companies_service_1.CompaniesService, router_1.Router, platform_browser_1.Title])
    ], CompaniesListComponent);
    return CompaniesListComponent;
}());
exports.CompaniesListComponent = CompaniesListComponent;

}
    };
    LeadersListComponent.prototype.gotoDetail = function (leader) {
        var link = ['/leaders/', leader.$key];
        this.router.navigate(link);
    };
    __decorate([
        core_1.Input(), 
        __metadata('design:type', Object)
    ], LeadersListComponent.prototype, "leaders", void 0);
    LeadersListComponent = __decorate([
        core_1.Component({
            moduleId: module.id,
            selector: 'leaders-list',
            templateUrl: 'leaders-list.component.html',
            directives: [card_1.MD_CARD_DIRECTIVES]
        }), 
        __metadata('design:paramtypes', [leaders_service_1.LeadersService, router_1.Router, platform_browser_1.Title])
    ], LeadersListComponent);
    return LeadersListComponent;
}());
exports.LeadersListComponent = LeadersListComponent;

var BrokersComponent = (function () {
    function BrokersComponent(teamService, titleService) {
        this.teamService = teamService;
        this.titleService = titleService;
    }
    BrokersComponent.prototype.ngOnInit = function () {
        this.brokers = this.teamService.getTeam();
        this.titleService.setTitle('Brokers');
    };
    BrokersComponent = __decorate([
        core_1.Component({
            moduleId: module.id,
            templateUrl: 'brokers.component.html',
            styleUrls: ['brokers.component.css'],
            providers: [broker_service_1.BrokerService],
            directives: [card_1.MD_CARD_DIRECTIVES]
        }), 
        __metadata('design:paramtypes', [broker_service_1.BrokerService, platform_browser_1.Title])
    ], BrokersComponent);
    return BrokersComponent;
}());
exports.BrokersComponent = BrokersComponent;

MdListModule,
    MdToolbarModule,
    MdCardModule,
    MdRadioModule,
    MdInputModule,
    MdButtonModule,
    MdIconModule
];

@NgModule({
    imports: [
        MdCoreModule.forRoot(),
        MdSidenavModule.forRoot(),
        MdListModule.forRoot(),
        MdToolbarModule.forRoot(),
        MdCardModule.forRoot(),
        MdRadioModule.forRoot(),
        MdInputModule.forRoot(),
        MdButtonModule.forRoot(),
        MdIconModule.forRoot()
    ],
    exports: MATERIAL_MODULES
})

export class MaterialModule { }

import {NgModule}      from '@angular/core';
import {CommonModule}  from '@angular/common';
import {routing} from './material-examples.routing';
import {MdButtonModule} from '@angular2-material/button';
import {MdCardModule} from '@angular2-material/card';
import {MaterialExamplesComponent} from './material-examples.component';

@NgModule({
    imports: [
        CommonModule,
        routing,
        MdButtonModule.forRoot(),
        MdCardModule.forRoot(),
    ],
    providers: [],
    declarations: [
        MaterialExamplesComponent
    ],
    exports: []
})
export class MaterialExamplesModule {

}

@NgModule({
  declarations: [
    App,
    DisplayFriendPipe,
    FriendsGraphql,
    FriendsRest,
    Intro,
    ListGraphql,
    ListRest
  ],
  imports: [
    BrowserModule,
    HttpModule,
    MdCoreModule.forRoot(),
    MdCardModule.forRoot(),
    MdButtonModule.forRoot(),
    MdToolbarModule.forRoot(),
    RouterModule.forRoot(routes)
  ],
  providers: [
    ProfilesService,
  ],
  bootstrap: [App]
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

var AppModule = (function () {
    function AppModule() {
    }
    AppModule = __decorate([
        core_1.NgModule({
            imports: [
                platform_browser_1.BrowserModule,
                forms_1.FormsModule,
                forms_1.ReactiveFormsModule,
                app_routes_1.routing,
                http_1.HttpModule,
                dir_1.RtlModule,
                sidenav_1.MdSidenavModule,
                list_1.MdListModule,
                toolbar_1.MdToolbarModule,
                card_1.MdCardModule,
                radio_1.MdRadioModule,
                input_1.MdInputModule,
                button_1.MdButtonModule
            ],
            declarations: [
                app_component_1.AppComponent,
                home_component_1.HomeComponent,
                i18n_component_1.I18nComponent,
                list_component_1.ListComponent,
                validation_component_1.ValidationComponent,
                angular2localization_2.TranslatePipe,
                angular2localization_2.LocaleDatePipe,
                angular2localization_2.LocaleDecimalPipe,
                angular2localization_2.LocalePercentPipe,
                angular2localization_2.LocaleCurrencyPipe,
                angular2localization_3.LocaleNumberValidator