so#43770236

components.config-summary-body.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.device-summary-footer.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.summary-panel.js

import Ember from 'ember';

export default Ember.Component.extend({
});

controllers.application.js

import Ember from 'ember';

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

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.config-summary {
  background-color: red
}

.summary-body {
    background-color: yellow
}

.summary-footer {
  background-color: orange
}
  

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
{{#summary-panel class="config-summary"}}
{{config-summary-body class="summary-body"
  config=model.config
  generateConfig="generateConfig"}}
{{device-summary-footer class="summary-footer"
  config=model.config
  generateConfig="generateConfig"}}    
{{/summary-panel}}
<br>
<br>

templates.components.config-summary-body.hbs

This is config summary body<br>
My classess are: {{class}}

templates.components.device-summary-footer.hbs

This is device summary footer<br>
My classess are: {{class}}

templates.components.summary-panel.hbs

This is start of summary panel<br>
{{yield}}
This is end of summary panel<br>
My classess are: {{class}}

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}