<div class="ts-card" style="max-width:420px;">
<div class="ts-card__header">
<div>
<h3 class="ts-card__title">Tuesday, 28 July</h3>
</div>
</div>
<div class="ts-card__empty">
<p class="ts-card__empty-title">Nothing scheduled for this day</p>
<p class="ts-card__empty-body">Posts you schedule for 28 July will show up here.</p>
<a href="#" class="button button--primary">Schedule a post for this day</a>
</div>
</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": "Tuesday, 28 July",
"body": null,
"eyebrow": null,
"meta": null,
"hint": null,
"image": null,
"action": null,
"secondaryAction": null,
"empty": {
"title": "Nothing scheduled for this day",
"body": "Posts you schedule for 28 July will show up here.",
"action": "Schedule a post for this day"
},
"single": false,
"selected": false,
"maxWidth": "420px"
}
Explain what belongs here and offer the action that fills it. Never a bare sentence.