<article class="meet-card grid__item" data-theme="cardiff">
    <a class="meet-card__link" href="#">
        <div class="meet-card__media">
            <img alt="meet-card__image" alt="Stranger than Fan Fiction" src="//placeponi.es/500/500/2">
        </div>
        <div class="meet-card__body">
            <h1 class="meet-card__title">Stranger than Fan Fiction</h1>
            <ul class="meet-card__meta">
                <li class="meet-card__meta-item meet-card__meta-item--locality">Bristol</li>
                <li class="meet-card__meta-item meet-card__meta-item--date">30th July 2016; 11:00am</li>
            </ul>
        </div>
        <div class="live-label meet-card__live">
            <strong class="live-label__title">Happening Now!</strong>
        </div>
    </a>
</article>
<article class="meet-card grid__item" data-theme="cardiff">
    <a class="meet-card__link" href="#">
        <div class="meet-card__media">
            <img alt="meet-card__image" alt="{{ meetTitle }}" src="{{ meetImage }}">
        </div>
        <div class="meet-card__body">
            <h1 class="meet-card__title">{{ meetTitle }}</h1>
            <ul class="meet-card__meta">
                {{#if meetLocality }}
                <li class="meet-card__meta-item meet-card__meta-item--locality">{{ meetLocality }}</li>
                {{/if}}
                <li class="meet-card__meta-item meet-card__meta-item--date">{{ meetDate }}</li>
            </ul>
        </div>
        {{#if isLive }}
        <div class="live-label meet-card__live">
            <strong class="live-label__title">Happening Now!</strong>
        </div>
        {{/if}}
    </a>
</article>
{
  "meetImage": "//placeponi.es/500/500/2",
  "meetTitle": "Stranger than Fan Fiction",
  "meetLocality": "Bristol",
  "meetDate": "30th July 2016; 11:00am",
  "isLive": true
}

Meet cards come in five variations—themed versions for meets located Bristol, Cardiff, Weston-super-Mare and Newport, plus the default ‘Severn’ version for meets happening outside of our usual jurisdiction.

The only thematic difference necessary is the value of the data-theme attribute.