Flexible Component

components.my-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNameBindings: ['isCompact:font-size-centi']
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  loremIpsum: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu tristique augue. Vivamus in dui lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec mollis egestas mauris sit amet luctus. Proin ipsum lectus, consectetur id mattis non, hendrerit nec orci. Nulla augue nisi, venenatis quis rhoncus nec, rutrum et nisi. Mauris eu tortor pretium purus laoreet vehicula ultrices quis odio. Quisque congue enim et urna rutrum auctor.',
});

styles.app.css

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

.font-bold {
  font-weight: 600;
}

.font-size-centi {
  font-size: 13px;
}

.mar-xs-5b {
  margin-bottom: 5px;
}

.mar-xs-15b {
  margin-bottom: 15px;
}

templates.application.hbs

{{my-component 
  title="Foo" 
  description=loremIpsum
 }}

<hr>

{{my-component 
  title="Foo" 
  description=loremIpsum 
  isCompact=true
}}

templates.components.my-component.hbs

<div class="{{if isCompact "mar-xs-5b" "mar-xs-15b"}}  font-bold">
  {{title}}
</div>

<div>
  {{description}}
</div>

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "2.12.2"
  }
}