Event List Card 

<link media="all" rel="stylesheet" href="/assets/themes/default/css/list-card.css?cb=">

<div class="list-card list-card--event">
    <div class="list-card__image-wrapper">
        <div class="list-card__image lazy-load-image" data-module="imageLazyLoad">
            <picture>
                <source media="(max-width: 840px)" type="image/jpeg" srcset="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" />
                <source media="(min-width: 841px)" type="image/jpeg" srcset="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" />
                <img src="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" loading="lazy" alt="">
            </picture>
        </div>
    </div>
    <div class="list-card__text-container">
        <div class="list-card__date">
            <p class="list-card__day">
                2020-7-4
            </p>
            <p class="list-card__start-time">
                10:00
            </p>
            <p class="list-card__end-time">
                12:00
            </p>
        </div>
        <p class="list-card__location">
            London, UK
        </p>
        <h3 class="list-card__title">Lorem Ipsum</h3>

        <p class="list-card__description">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae eius atque magnam repellat reiciendis.
        </p>
        <div class="list-card__footer">
            <p class="event-default-card__price">
                £31 pp
            </p>
            <div class="list-card__cta-container">
                <a href="#" data-module="cta" class="cta list-card__cta">
                    Click here
                </a>
            </div>
        </div>
    </div>
</div>
 
{{#if firstInstance}}
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/list-card.css?cb={{cacheBuster}}">
{{/if}}

<div class="list-card list-card--event">
    {{#if image}}
    <div class="list-card__image-wrapper">
        <div class="list-card__image lazy-load-image" data-module="imageLazyLoad">
            {{> @picture image }}
        </div>
    </div>
    {{/if}}
    <div class="list-card__text-container">
        <div class="list-card__date">
            <p class="list-card__day">
                {{date}}
            </p>
            <p class="list-card__start-time">
                {{startTime}}
            </p>
            {{#if endTime}}
            <p class="list-card__end-time">
                {{endTime}}
            </p>
            {{/if}}
        </div>
        {{#if location}}
        <p class="list-card__location">
            {{location}}
        </p>
        {{/if}}
        <h3 class="list-card__title">{{title}}</h3>

        <p class="list-card__description">
            {{description}}
        </p>
        <div class="list-card__footer">
            {{#if price}}
            <p class="event-default-card__price">
                {{price}}
            </p>
            {{/if}}
            {{#if cta}}
            <div class="list-card__cta-container">
                {{> @link text=cta.text url=cta.url target=cta.target cssClasses="list-card__cta" }}
            </div>
            {{/if}}
        </div>
    </div>
</div>
 
{
  "theme": "default",
  "firstInstance": true,
  "image": {
    "placeholderImageUrl": "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA",
    "fallbackImageUrl": "http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg",
    "sources": [
      {
        "type": "image/jpeg",
        "desktopImageUrl": "http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg"
      }
    ]
  },
  "date": "2020-7-4",
  "startTime": "10:00",
  "endTime": "12:00",
  "title": "Lorem Ipsum",
  "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae eius atque magnam repellat reiciendis.",
  "location": "London, UK",
  "cta": {
    "url": "#",
    "text": "Click here"
  },
  "price": "£31 pp"
}

No notes defined.