<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2 Material Plunker</title>

    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://angular-code.firebaseapp.com/zone.js/dist/zone.js"></script>
    <script src="https://angular-code.firebaseapp.com/reflect-metadata/Reflect.js"></script>
    <script src="https://rawgithub.com/systemjs/systemjs/0.19.27/dist/system.js"></script>

    <!-- Load Bundle from Asset Host -->
    <script src="https://angular-code.firebaseapp.com/bundle.js"></script>
    
    <!-- Configure SystemJS -->
    <script src="systemjs.config.js"></script>

    <script>
      System
        .import('app.component.ts')
        .catch(console.error.bind(console));
    </script>
    
    <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <material-app>Loading the Angular 2 Material App...</material-app>
  </body>

</html>
md-toolbar {
  margin-bottom: 30px;
}
<md-toolbar color="primary">
  Angular Material 2 App
</md-toolbar>

<div class="container">
  <div class="row">
  <div class="col-md-4">
    <md-card>
    <img md-card-image src="https://material.angularjs.org/latest/img/washedout.png">
    <md-card-title>Content Title</md-card-title>
    <md-card-content>
      <p>Here is some content</p>
    </md-card-content>
    <md-card-actions align="end">
      <button md-button>LIKE</button>
      <button md-button>SHARE</button>
    </md-card-actions>
  </md-card>
  </div>
  <div class="col-md-4">
    <md-card>
    <md-card-title>Content Title</md-card-title>
    <md-card-content>
      <p>Here is some content. Here is some content. Here is some content. Here is some content</p>
    </md-card-content>
    <md-card-actions align="end">
      <button md-button>LIKE</button>
      <button md-button>SHARE</button>
    </md-card-actions>
  </md-card>
  </div>
  <div class="col-md-4">
    <md-card>
    <img md-card-image src="https://material.angularjs.org/latest/img/washedout.png">
    <md-card-title>Very very very very long Content Title</md-card-title>
    <md-card-content>
      <p>Here is some content</p>
    </md-card-content>
    <md-card-actions align="end">
      <button md-button>LIKE</button>
      <button md-button>SHARE</button>
    </md-card-actions>
  </md-card>
  </div>
</div>
</div>

import {Component} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';
import {MdToolbar} from '@angular2-material/toolbar';
import {MdButton} from '@angular2-material/button';
import {MdCard} from '@angular2-material/card';

@Component({
  selector: 'material-app',
  templateUrl: 'app.component.html',
  directives: [MdToolbar, MdButton, MdCard]
})
export class AppComponent {}

bootstrap(AppComponent);
System.config({
  transpiler: 'typescript',
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  packages: {
    '.': {
      defaultExtension: 'ts'
    }
  },
  map: {
    '@angular': 'node_modules/@angular',
    '@angular2-material': 'node_modules/@angular2-material',
    'rxjs': 'node_modules/rxjs'
  }
});

var _packageConfig = {};
var _defaultPackages = [
  '@angular/core', '@angular/common', '@angular/compiler', '@angular/http', '@angular/router',
  '@angular/platform-browser', '@angular/platform-browser-dynamic', 'rxjs'
];

// Angular Material 2 Packages to load.
var _materialPackages = [
  'core', 'toolbar', 'button', 'card', 'checkbox', 'icon', 'input', 'list', 'progress-bar',
  'progress-circle', 'radio', 'sidenav'
];

_materialPackages.forEach(function(item) {
  // All Material 2 components are prefixed with  @angular2-material and use
  // the components name as entry point.
  _packageConfig['@angular2-material/' + item] = { main: item };
});

_defaultPackages.forEach(function (item) {
  // Angular's Default Packages are always using `index` as an entry point.
  _packageConfig[item] = { main: 'index' };
});

// Apply the new generated packages to the SystemJS configuration.
System.config({ packages: _packageConfig });

/*
 Copyright 2016 Google Inc. All Rights Reserved.
 Use of this source code is governed by an MIT-style license that
 can be found in the LICENSE file at http://angular.io/license
 */