<div class="ts-card is-selected" style="max-width:320px;">

    <div class="ts-card__header">
        <div>

            <h3 class="ts-card__title">Publish now</h3>
        </div>

    </div>

    <p class="ts-card__body">Goes out as soon as you publish.</p>

</div>
<div class="ts-card{{#if single}} ts-card--tint{{/if}}{{#if selected}} is-selected{{/if}}"
     style="{{#if maxWidth}}max-width:{{maxWidth}};{{/if}}">
  {{#if image}}
  <div class="ts-card__figure">
    <img src="{{image}}" alt="{{imageAlt}}">
  </div>
  {{/if}}

  {{#if title}}
  <div class="ts-card__header">
    <div>
      {{#if eyebrow}}<div class="ts-eyebrow">{{eyebrow}}</div>{{/if}}
      <h3 class="ts-card__title">{{title}}</h3>
    </div>
    {{#if meta}}<div class="ts-card__meta">{{meta}}</div>{{/if}}
  </div>
  {{/if}}

  {{#if body}}<p class="ts-card__body">{{body}}</p>{{/if}}

  {{#if hint}}<p class="ts-hint">{{hint}}</p>{{/if}}

  {{#if empty}}
  <div class="ts-card__empty">
    <p class="ts-card__empty-title">{{empty.title}}</p>
    <p class="ts-card__empty-body">{{empty.body}}</p>
    <a href="#" class="button button--primary">{{empty.action}}</a>
  </div>
  {{/if}}

  {{#if action}}
  <div class="ts-card__actions">
    <a href="#" class="button button--primary">{{action}}</a>
    {{#if secondaryAction}}<a href="#" class="button">{{secondaryAction}}</a>{{/if}}
  </div>
  {{/if}}
</div>
{
  "title": "Publish now",
  "body": "Goes out as soon as you publish.",
  "eyebrow": null,
  "meta": null,
  "hint": null,
  "image": null,
  "action": null,
  "secondaryAction": null,
  "empty": null,
  "single": false,
  "selected": true,
  "maxWidth": "320px"
}

One selection treatment for every selectable card, day cell and tab.