Named blocks

components.card-layout.card-meta.js

import Ember from 'ember';

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

components.card-layout.card-title.js

import Ember from 'ember';

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

components.named-blocks.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['card-layout'],
});

controllers.application.js

import Ember from 'ember';

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

helpers.array.js

import Ember from 'ember';

export function array(params/*, hash*/) {
  return params;
}

export default Ember.Helper.helper(array);

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<p>Notice title appears before meta</p>
<br>
{{#card-layout as |card|}}
  {{#card.meta class="custom-class"}}Meta{{/card.meta}}
  {{#card.title}}Title{{/card.title}}
{{/card-layout}}
<br>
<br>

templates.components.card-layout.card-meta.hbs

{{yield}}

templates.components.card-layout.card-title.hbs

{{yield}}

templates.components.card-layout.hbs

<div class="card-layout__body">
  {{yield (hash
    title=(component "card-layout/card-title" classNames=(array "card-layout__title"))
  )}}
</div>
<div class="card-layout__footer">
  {{yield (hash
    meta=(component "card-layout/card-meta" classNames=(array "card-layout__meta"))
  )}}
</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": "3.4.2"
  }
}