Complex cards include a prominent colour background for the card heading along with space for additional detail information.
<!-- COMPONENT: Complex card -->
<article class="card complex-card">
<a href="#">
<header class="bg-violet-50-dark" data-equalizer-watch="card-header">
<h1>Event title</h1>
</header>
</a>
<div class="more-info" data-equalizer-watch="more-info">
<span class="date-time">1 Oct 2017 - 1:15PM</span>
<span class="location">Wessex House, 4.16, Claverton Down Campus, University of Bath</span>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit dictum lectus laoreet pretium</p>
</article>
<!-- End component: Complex card -->