Complex card

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 -->
  • Handle: @complex-card
  • Preview:
  • Filesystem Path: components/ingredients/common-ingredients/cards/complex-card/complex-card.hbs
  • Referenced by (1): @events