account_balance.html

<div class="card">
  <div class="card-body">
    <table class="account-standings account-standings-balance">
      <tbody>
        <tr>
          <td data-tooltip="{{ account_balance_tooltip }}">
	    <span class="account_standings_label">{{ account_balance_label }}</span>
            <strong>{{ format_currency(account_balance, currency) }}</strong>
          </td>
          <td data-tooltip="{{ account_credit_tooltip }}">
            <span class="account_standings_label">{{ account_credit_label }}</span>
            <strong>{{ format_currency(account_credit, currency) }}</strong>
          </td>
          <td data-tooltip="{{ account_outstanding_tooltip }}">
            <span class="account_standings_label">{{ account_outstanding_label }}</label>
            <strong class="text-danger">{{ format_currency(account_outstanding, currency) }}</strong>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

card_view.html

<div class="row layout-main">
  <div class="col-md-12 layout-main-section-wrapper">
    <div class="layout-main-section">
      <div class="layout-main-section">
        <div class="card-view-page row">
          <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
            {{ frappe.render_template("account_balance", data) }}
          </div>
          <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

card_view.js

frappe.ui.form.on('Customer', {
	'refresh': function(frm){
		debugger;
		if (!frm.doc.__islocal){
			frm.trigger('toggle_card_view');
			frm.trigger('make_card_view_btn');
		}
	},
	'make_card_view_btn': function(frm){
		if (!frm.doc.__islocal){
			frm.card_view_btn && frm.card_view__btn.remove();
			frm.card_view_btn = frm.page.add_action_icon(
				'octicon octicon-pencil',
				function() {
					frm.trigger('toggle_card_view');
					if (frm.show_card_view){
						frm.card_view_btn.find('i').removeClass('octicon-pencil').addClass('octicon-graph');
					} else {
						frm.card_view_btn.find('i').removeClass('octicon-graph').addClass('octicon-pencil');
					}
				}
			);
		}
	},
	'toggle_card_view': function(frm){
		frm.show_card_view = !frm.show_card_view;
		frm.trigger('display_card_view');
	},
	'display_card_view': function(frm){
		if ((frm.show_card_view && frm.card_view_active)
		    || (!frm.show_card_view && !frm.card_view_active)) {
			return
		}

		// Make card view
		if (!frm.card_view){
			frm.page.add_view(
				'card_view',
				frappe.render_template('card_view', {'data': frm.doc.__onload.card_view_info})
			);
			frm.card_view = new telecom.CustomerCardView(
				frm.layout.views.card_view,
				frm
			);
		}

		// Toggle card view
		frm.page.set_view(frm.show_card_view ? "card_view": "main");
		frm.card_view_active = !frm.card_view_active;

		// Refresh
		if (frm.card_view_active) frm.card_view.refresh();
		//frm.page.refresh();
	}
});

telecom.CustomerCardView = Class.extend({
	init: function(wrapper, frm){
		this.wrapper = wrapper;
		this.frm = frm;
	},
	refresh: function(){
	}
});