bk.tool

<style>
  .bk-bg {
    width: 100%;
    height: calc(100vh - 64px);
    background-image: url("res/bg/cab.jpg");
    background-size: cover;
    background-position: center center;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .bk-bg>.mdl-card {
    margin: 15px;
  }

  .bk-bg>.mdl-card>.mdl-card__title {
    height: 180px;
    background-position: cover;
    background-position: center center;
    background-repeat: no-repeat;
    box-shadow: 0 6px 15px -3px rgba(0, 0, 0, 0.4);
  }

  .bk-bg>.mdl-card:first-child>.mdl-card__title {
    background: url("res/bg/coffee_a.png");
  }

  .bk-bg>.mdl-card:last-child>.mdl-card__title {
    background: url("res/bg/beer_a.png");
  }

  .bk-bg>.mdl-card>.mdl-card__title h2 {
    background: rgba(255, 255, 255, 0.8);
    padding: 2px;
    border-radius: 3px;
  }

  .bk-bg .mdl-data-table {
    width: 100%;
  }
</style>
<div class="bk-bg">
  <!-- Coffee -->
  <div class="demo-card-wide mdl-card mdl-shadow--2dp">
    <div class="mdl-card__title">
      <h2 class="mdl-card__title-text mdl-shadow--2dp">Coffee</h2>
    </div>
    <div class="mdl-card__supporting-text">
      <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
        <thead>
          <tr>
            <th class="mdl-data-table__cell--non-numeric">SuperHero</th>
            <th>Coffee</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
    <div class="mdl-card__actions mdl-card--border">
      <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Menu</a>
    </div>
  </div>
  <!-- Beer -->
  <div class="demo-card-wide mdl-card mdl-shadow--2dp">
    <div class="mdl-card__title">
      <h2 class="mdl-card__title-text mdl-shadow--2dp">Beer</h2>
    </div>
    <div class="mdl-card__supporting-text">
      <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
        <thead>
          <tr>
            <th class="mdl-data-table__cell--non-numeric">SuperHero</th>
            <th>Beers</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
    <div class="mdl-card__actions mdl-card--border">
      <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Stats</a>
      <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Lock Beer Machine</a>
    </div>
  </div>
</div>
<script>
  var superheroes = [
    [
      ['Anon', 34],
      ['Trololo', 23],
      ['Random Dude', 13]
    ],
    [
      ['Anon', 138],
      ['Trololo', 97],
      ['Random Dude', 72]
    ]
  ];
  var i = 0;
  $('.mdl-card__supporting-text tbody').each(function() {
    $(this).html('');
    for (var n = 0; n < superheroes[i].length; n++)
      $(this).append('<tr><td class="mdl-data-table__cell--non-numeric">' + superheroes[i][n][0] + '</td><td>' + superheroes[i][n][1] + '</td></tr>');
    i++;
  })
</script>