mdb-card-rotating-markup

<mdb-card-rotating #card class="px-1">
  <div class="face front tp-box_side tp-box_front">
    <div class="card-body p-1 h-100 d-flex flex-column justify-content-start">
      <h4 class="card-title">EvilCorp</h4>
      <hr>
      <p>Overview of Databases</p>
      <p><small>click row to rotate card</small></p>
      <table class="table table-sm">
        <thead>
          <tr>
            <th>DBNAME</th>
            <th>DBSIZE</th>
            <th>STATUS</th>
          </tr>
        </thead>
        <tbody>
          <tr (click)="card.toggle()">
            <td><a data-card="card-1">farm</a></td>
            <td>6 meeeelion MB </td>
            <td [ngStyle]="{'color': 'green'}"><span class="badge badge-pill green">Active</span></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="back tp-box_side tp-box_back">
    <div class="card-body p-1 h-100 d-flex flex-column justify-content-start">
      <h4>Summary: </h4>
      <hr>
      <p>Display summary KPI's for cow database</p>
      <div>
        <p class="my-1">moo</p>
        <table class="table table-sm my-0">
          <thead>
            <tr>
              <th>Stats</th>
              <th>Sounds</th>
              <th>Activities</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><a data-card="card-1"><i class="fa fa-bar-chart" aria-hidden="true"></i></a></td>
              <td>moo</td>
              <td>eats grass, tips over</td>
            </tr>
            <ng-template #nocell><td><span class="badge badge-pill badge-info">meow?</span></td></ng-template>
          </tbody>
        </table>
      </div>
      <a class="rotate-btn my-0" data-card="card-1" (click)="card.toggle()"><i class="fa fa-undo"></i> Overview</a>
      <div class="h-100 ml-auto d-flex flex-column justify-content-end"><small>i love lamp</small></div>
    </div>
  </div>
</mdb-card-rotating>