<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.