ic-card

components.ic-card-list.js

import Ember from 'ember';

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

components.ic-card-section.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['ic-card__section'],
  classNameBindings: ['paddingClass'],
  paddingClass: Ember.computed('padding', function() {
    return `o__${this.get('padding')}`;
  }),
});

components.ic-card.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['ic-card'],
  classNameBindings: ['paddingClass'],
  paddingClass: Ember.computed('padding', function() {
    return `o__${this.get('padding')}`;
  }),
});

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;
}

.ic-card {
  border: 1px solid black;
}
.ic-card__section.o__s,
.ic-card.o__s {
  padding: 20px;
}

.ic-card__section.o__c,
.ic-card.o__c {
  padding: 12px;
}

.u__m__20 {
  margin-bottom: 10px;
}

templates.application.hbs

{{#ic-card padding="s"}}
Foo
{{/ic-card}}

<hr>

{{#ic-card as |c|}}
  {{#c.section padding="c"}}
  Bar
  {{/c.section}}
{{/ic-card}}

<hr>

{{#ic-card padding="c" as |c|}}
  {{#c.section}}
  Foo
  {{/c.section}}
  {{#c.section padding="c"}}
  Bar
  {{/c.section}}
  {{#c.section padding="s"}}
  Baz
  {{/c.section}}
{{/ic-card}}

<hr>
{{#ic-card-list as |l|}}
  {{#l.card padding="s"}}
    One
  {{/l.card}}
  {{#l.card padding="c"}}
    Two
  {{/l.card}}
  {{#l.card}}
    Three
  {{/l.card}}
{{/ic-card-list}}

templates.components.ic-card-list.hbs

{{yield (hash card=(component 'ic-card' class="u__m__20"))}}

templates.components.ic-card-section.hbs

{{yield}}

templates.components.ic-card.hbs

{{yield (hash
  section=(component 'ic-card-section'
  )
)}}

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": "3.4.2"
  }
}