New Twiddle

components.my-tile-card.js

import Ember from 'ember';

export default Ember.Component.extend({
	classNames: [
    'bd(1)',
    'bd-c(gray-l1)',
    'p(2)',
    'bs(1)',
    'pos(relative)'
  ]
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

instance-initializers.component-name.js

import Ember from 'ember';

const {
  get,
  computed,
  inject: { service }
} = Ember;

export function initialize() {
  if (EmberENV.development) {
    Ember.Component.reopen({
      config: service(),
      attributeBindings: ['componentName:component-name'],
      componentName: computed('config.showNames', function() {
        let showNames = get(this, 'config.showNames');
        let name  = get(this, '_debugContainerKey');
        return showNames ? name.split(':').pop() : undefined;
      })
    });
  }
}

export default {
  name: 'component-name',
  initialize: initialize,
};

services.config.js

import Ember from 'ember';

export default Ember.Service.extend({
  showNames: true
});

styles.app.css

@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
@import "https://cdn.rawgit.com/krivaten/elassus/master/css/elassus.min.css";

templates.application.hbs

<div class="container">
  <div class="d(f) m-x(-3)">
    <div class="w(50%) p-x(3)">
      {{my-tile-card}}
    </div>
  </div>
</div>

templates.components.my-tile-card.hbs

<div class="d(f)">
  <div class="w(5) m-r(2)">
    <img src="https://unsplash.it/200" class="br(fill)" />
  </div>
  <div class="w(100%)">
    <h3 class="m(0) fw(200) m-r(4)">Checking Account</h3>
    <dl class="m-y(2) c(gray)">
      <div class="d(f) jc(sb)">
        <dt class="m-r(2)">Account Balance</dt>
        <dd class="m-l(2)">$12.50</dd>
      </div>
      <div class="d(f) jc(sb)">
        <dt class="m-r(2)">Last Payment</dt>
        <dd class="m-l(2)">Today</dd>
      </div>
    </dl>
  </div>
</div>

<button class="bg-c(transparent) bd(0) pos(absolute) t(0) r(0) lh(title) w(4) h(4)">
	<span class="fa fa-ellipsis-v fa-lg"></span>
</button>

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "development": false,
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "elassus": "https://cdn.rawgit.com/krivaten/elassus/master/css/elassus.min.css",
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0"
  }
}