Card API

card.component\.js

import Component from '@glimmer/component';
import { capitalize } from '@ember/string';

export default class extends Component {
  get cardAttributes() {
    let attributes = {
      'title': this.args.card.attributes.title,
      'list-key-value': this.listKeyValue,
    };
    
		return Object
    	.entries(attributes)
      .reduce((a,[k,v]) => (v ? {...a, [k]:v} : a), {});
  }

  get listKeyValue() {
    let { listKeyValue } = this.args.card.attributes;
    
    if (!listKeyValue) return;
    
    let keys = Object.keys(listKeyValue);

    let attribute = keys.map((key) => {
      return {
        key: capitalize(key),
        value: listKeyValue[key],
      }
    });

    return attribute;
  }
}

card.list-key-value.component\.js

import Component from '@glimmer/component';

export default class extends Component {
}

card.list-key-value.template\.hbs

<dl>
  {{#each @data as |item|}}
    <dt>{{item.key}}</dt>
    <dd>{{item.value}}</dd>
  {{/each}}
</dl>

card.template\.hbs

{{#each-in this.cardAttributes as |componentName componentData|}}
	<section>
  	{{component (concat 'card/' componentName) data=componentData}}
  </section>
{{/each-in}}

card.title.component\.js

import Component from '@glimmer/component';

export default class extends Component {
}

card.title.template\.hbs

<h3>{{@data}}</h3>

controllers.application\.js

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  car = {
    attributes: {
    	title: 'Car',
      listKeyValue: {
        make: 'Honda',
        model: 'Pilot',
      },
    },
  }

  dog = {
    attributes: {
    	title: 'Dog',
      listKeyValue: {
        species: 'Dog',
        breed: 'Border Collie',
      },
    },
  }
}

templates.application\.hbs

<Card @card={{this.car}}/>
<Card @card={{this.dog}}/>

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": true,
    "_APPLICATION_TEMPLATE_WRAPPER": false,
    "_JQUERY_INTEGRATION": false
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}