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() {
    if (this.get('padding')) {
      return `o__${this.get('padding')}-padding`;
    } else {
			return '';		
		}
  }),
});

components.ic-card.js

import Ember from 'ember';

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

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'ic-card demo'
});

styles.app.css

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

.ic-card {
  border: 1px solid rgba(0,0,0,.2);
  border-radius: 4px;
  transition: box-shadow linear 40ms, border-color linear .2s;
  overflow: hidden;
}

.ic-card.o__interactive:hover {
  border-color: #286efa;
	box-shadow: 0 4px 14px 0 rgba(5,73,209,.1);
	cursor: pointer;
}

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

.ic-card__section.o__regular-padding,
.ic-card.o__regular-padding {
  padding: 20px;
}

templates.application.hbs

{{#ic-card padding="regular"}}
  Card body text
{{/ic-card}}

<hr style="padding-bottom: 20px; border: none">

{{#ic-card padding="regular" isInteractive=true}}
  Hoverable card
{{/ic-card}}

<hr style="padding-bottom: 20px; border: none">

{{#ic-card as |c|}}
  {{#c.section padding="compact"}}
    Section body text with compact padding
  {{/c.section}}
{{/ic-card}}

<hr style="padding-bottom: 20px; border: none">

{{#ic-card as |c|}}
  {{#c.section padding="none"}}
    <div style="background: linear-gradient(to right, #83a4d4, #b6fbff); height: 80px">
      <!--this could be an image or some other full bleed content-->
    </div>
  {{/c.section}}
  {{#c.section padding="regular"}}
    Section body text
  {{/c.section}}
{{/ic-card}}

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