Events
#
Event Card Quiz {% include 'components/events/event-card~quiz' %}
#
HTML 
<!-- PARENT CONTAINER START -->
<div class="inner clearfix equaliser-row event-cards event-cards--big_quiz">
	<!-- EVENT CARD START -->
		<div class="large-col-4">
			<article class="event-card  equalise">
			<div class="event-card__top">
				<div class="event-card__date">
											0.7 Miles Away
									</div>

				
				<h1 class="event-card__title">Comedy Night with Andy Kind</h1>
				<div class="event-card__location">St Jude’s Church, Liverpool</div>

			</div>

			<div class="event-card__details">
	
								<div class="event-card__meta">
											<div class="event-card__icon event-card__time">10-12am</div>
					
											<a class="event-card__icon event-card__map">View on map</a>
						<a class="event-card__icon event-card__location-desktop">St Jude’s Church, Liverpool</a>
					
											<a class="event-card__icon event-card__website">www.tearfund.org</a>
					
											<a href="tel:01234 567890" class="event-card__icon event-card__phone">01234 567890</a>
					
											<a class="event-card__icon event-card__email">email@tearfund.org</a>
									</div>
				<p></p>

									<div class="center-text">
						<a href="event_cta" class="button">Book now</a>
					</div>
							</div>
			<hr />
			<div class="center-text">
				<div class="event-card__icon event-card__more"></div>
			</div>
		</article>
	</div>
	<!-- EVENT CARD END -->
</div>
<!-- PARENT CONTAINER END -->
Twig 
<!-- PARENT CONTAINER START -->
<div class="inner clearfix equaliser-row event-cards event-cards--{{ modifier }}">
	<!-- EVENT CARD START -->
	{% if event_feature %}
	<div class="large-col-12">
	{% else %}
	<div class="large-col-4">
	{% endif %}
		<article class="event-card {% if event_feature %}event-card--featured {% else %} equalise{% endif %}">
			<div class="event-card__top">
				<div class="event-card__date">
					{% if event_distance %}
						{{ event_distance }}
					{% else %}
						{{ event_date }}
						<span>{{ event_day }}</span>
					{% endif %}
				</div>

				{% if event_image %}
					<div class="event-card__desktop-image">
						{% if event_feature %}
						<div class="evant-card__banner event-card__banner--featured">Featured Event</div>
						{% endif %}
						<img src="{{ event_image }}">
					</div>
				{% endif %}

				<h1 class="event-card__title">{{ event_title }}</h1>
				<div class="event-card__location">{{ event_location }}</div>

			</div>

			<div class="event-card__details">
	
				{% if event_image %}
					<img class="event-card__desktop-mobile" src="{{ event_image }}">
				{% endif %}
				<div class="event-card__meta">
					{% if event_time %}
						<div class="event-card__icon event-card__time">{{ event_time }}</div>
					{% endif %}

					{% if event_location %}
						<a class="event-card__icon event-card__map">View on map</a>
						<a class="event-card__icon event-card__location-desktop">{{ event_location }}</a>
					{% endif %}

					{% if event_website %}
						<a class="event-card__icon event-card__website">{{ event_website }}</a>
					{% endif %}

					{% if event_phone %}
						<a href="tel:{{ event_phone }}" class="event-card__icon event-card__phone">{{ event_phone }}</a>
					{% endif %}

					{% if event_email %}
						<a class="event-card__icon event-card__email">{{ event_email }}</a>
					{% endif %}
				</div>
				<p>{{ event_description }}</p>

				{% if event_cta %}
					<div class="center-text">
						<a href="event_cta" class="button">Book now</a>
					</div>
				{% endif %}
			</div>
			<hr />
			<div class="center-text">
				<div class="event-card__icon event-card__more"></div>
			</div>
		</article>
	</div>
	<!-- EVENT CARD END -->
</div>
<!-- PARENT CONTAINER END -->

{
    "event_date": "26 SEPTEMBER",
    "event_day": "WEDNESDAY",
    "event_title": "Comedy Night with Andy Kind",
    "event_location": "St Jude\u2019s Church, Liverpool",
    "event_time": "10-12am",
    "event_email": "email@tearfund.org",
    "event_phone": "01234 567890",
    "event_website": "www.tearfund.org",
    "event_image": null,
    "event_description": null,
    "event_cta": true,
    "event_feature": false,
    "modifier": "big_quiz",
    "event_button": null,
    "event_distance": "0.7 Miles Away"
}
Event Card Feature {% include 'components/events/event-card~feature' %}
#
HTML 
<!-- PARENT CONTAINER START -->
<div class="inner clearfix equaliser-row event-cards event-cards--">
	<!-- EVENT CARD START -->
		<div class="large-col-12">
			<article class="event-card event-card--featured ">
			<div class="event-card__top">
				<div class="event-card__date">
											26 SEPTEMBER
						<span>WEDNESDAY</span>
									</div>

									<div class="event-card__desktop-image">
												<div class="evant-card__banner event-card__banner--featured">Featured Event</div>
												<img src="https://images.unsplash.com/photo-1471086569966-db3eebc25a59?ixlib=rb-0.3.5&amp;s=7fc5fb9bc96aae0d6dfc36bb4839e758&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80">
					</div>
				
				<h1 class="event-card__title">Comedy Night with Andy Kind</h1>
				<div class="event-card__location">St Jude’s Church, Liverpool</div>

			</div>

			<div class="event-card__details">
	
									<img class="event-card__desktop-mobile" src="https://images.unsplash.com/photo-1471086569966-db3eebc25a59?ixlib=rb-0.3.5&amp;s=7fc5fb9bc96aae0d6dfc36bb4839e758&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80">
								<div class="event-card__meta">
											<div class="event-card__icon event-card__time">10-12am</div>
					
											<a class="event-card__icon event-card__map">View on map</a>
						<a class="event-card__icon event-card__location-desktop">St Jude’s Church, Liverpool</a>
					
											<a class="event-card__icon event-card__website">www.tearfund.org</a>
					
											<a href="tel:01234 567890" class="event-card__icon event-card__phone">01234 567890</a>
					
											<a class="event-card__icon event-card__email">email@tearfund.org</a>
									</div>
				<p>Join us for an evening of comedy for all the family from award-winning comedian Andy Kind.</p>

									<div class="center-text">
						<a href="event_cta" class="button">Book now</a>
					</div>
							</div>
			<hr />
			<div class="center-text">
				<div class="event-card__icon event-card__more"></div>
			</div>
		</article>
	</div>
	<!-- EVENT CARD END -->
</div>
<!-- PARENT CONTAINER END -->
Twig 
<!-- PARENT CONTAINER START -->
<div class="inner clearfix equaliser-row event-cards event-cards--{{ modifier }}">
	<!-- EVENT CARD START -->
	{% if event_feature %}
	<div class="large-col-12">
	{% else %}
	<div class="large-col-4">
	{% endif %}
		<article class="event-card {% if event_feature %}event-card--featured {% else %} equalise{% endif %}">
			<div class="event-card__top">
				<div class="event-card__date">
					{% if event_distance %}
						{{ event_distance }}
					{% else %}
						{{ event_date }}
						<span>{{ event_day }}</span>
					{% endif %}
				</div>

				{% if event_image %}
					<div class="event-card__desktop-image">
						{% if event_feature %}
						<div class="evant-card__banner event-card__banner--featured">Featured Event</div>
						{% endif %}
						<img src="{{ event_image }}">
					</div>
				{% endif %}

				<h1 class="event-card__title">{{ event_title }}</h1>
				<div class="event-card__location">{{ event_location }}</div>

			</div>

			<div class="event-card__details">
	
				{% if event_image %}
					<img class="event-card__desktop-mobile" src="{{ event_image }}">
				{% endif %}
				<div class="event-card__meta">
					{% if event_time %}
						<div class="event-card__icon event-card__time">{{ event_time }}</div>
					{% endif %}

					{% if event_location %}
						<a class="event-card__icon event-card__map">View on map</a>
						<a class="event-card__icon event-card__location-desktop">{{ event_location }}</a>
					{% endif %}

					{% if event_website %}
						<a class="event-card__icon event-card__website">{{ event_website }}</a>
					{% endif %}

					{% if event_phone %}
						<a href="tel:{{ event_phone }}" class="event-card__icon event-card__phone">{{ event_phone }}</a>
					{% endif %}

					{% if event_email %}
						<a class="event-card__icon event-card__email">{{ event_email }}</a>
					{% endif %}
				</div>
				<p>{{ event_description }}</p>

				{% if event_cta %}
					<div class="center-text">
						<a href="event_cta" class="button">Book now</a>
					</div>
				{% endif %}
			</div>
			<hr />
			<div class="center-text">
				<div class="event-card__icon event-card__more"></div>
			</div>
		</article>
	</div>
	<!-- EVENT CARD END -->
</div>
<!-- PARENT CONTAINER END -->

{
    "event_date": "26 SEPTEMBER",
    "event_day": "WEDNESDAY",
    "event_title": "Comedy Night with Andy Kind",
    "event_location": "St Jude\u2019s Church, Liverpool",
    "event_time": "10-12am",
    "event_email": "email@tearfund.org",
    "event_phone": "01234 567890",
    "event_website": "www.tearfund.org",
    "event_image": "https:\/\/images.unsplash.com\/photo-1471086569966-db3eebc25a59?ixlib=rb-0.3.5&s=7fc5fb9bc96aae0d6dfc36bb4839e758&auto=format&fit=crop&w=1350&q=80",
    "event_description": "Join us for an evening of comedy for all the family from award-winning comedian Andy Kind.",
    "event_cta": true,
    "event_feature": true,
    "event_button": true
}
Event Card {% include 'components/events/event-card' %}
#
HTML 
<!-- PARENT CONTAINER START -->
<div class="inner clearfix equaliser-row event-cards event-cards--">
	<!-- EVENT CARD START -->
		<div class="large-col-4">
			<article class="event-card  equalise">
			<div class="event-card__top">
				<div class="event-card__date">
											26 SEPTEMBER
						<span>WEDNESDAY</span>
									</div>

									<div class="event-card__desktop-image">
												<img src="https://images.unsplash.com/photo-1471086569966-db3eebc25a59?ixlib=rb-0.3.5&amp;s=7fc5fb9bc96aae0d6dfc36bb4839e758&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80">
					</div>
				
				<h1 class="event-card__title">Comedy Night with Andy Kind</h1>
				<div class="event-card__location">St Jude’s Church, Liverpool</div>

			</div>

			<div class="event-card__details">
	
									<img class="event-card__desktop-mobile" src="https://images.unsplash.com/photo-1471086569966-db3eebc25a59?ixlib=rb-0.3.5&amp;s=7fc5fb9bc96aae0d6dfc36bb4839e758&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80">
								<div class="event-card__meta">
											<div class="event-card__icon event-card__time">10-12am</div>
					
											<a class="event-card__icon event-card__map">View on map</a>
						<a class="event-card__icon event-card__location-desktop">St Jude’s Church, Liverpool</a>
					
											<a class="event-card__icon event-card__website">www.tearfund.org</a>
					
											<a href="tel:01234 567890" class="event-card__icon event-card__phone">01234 567890</a>
					
											<a class="event-card__icon event-card__email">email@tearfund.org</a>
									</div>
				<p>Join us for an evening of comedy for all the family from award-winning comedian Andy Kind.</p>

									<div class="center-text">
						<a href="event_cta" class="button">Book now</a>
					</div>
							</div>
			<hr />
			<div class="center-text">
				<div class="event-card__icon event-card__more"></div>
			</div>
		</article>
	</div>
	<!-- EVENT CARD END -->
</div>
<!-- PARENT CONTAINER END -->
Twig 
<!-- PARENT CONTAINER START -->
<div class="inner clearfix equaliser-row event-cards event-cards--{{ modifier }}">
	<!-- EVENT CARD START -->
	{% if event_feature %}
	<div class="large-col-12">
	{% else %}
	<div class="large-col-4">
	{% endif %}
		<article class="event-card {% if event_feature %}event-card--featured {% else %} equalise{% endif %}">
			<div class="event-card__top">
				<div class="event-card__date">
					{% if event_distance %}
						{{ event_distance }}
					{% else %}
						{{ event_date }}
						<span>{{ event_day }}</span>
					{% endif %}
				</div>

				{% if event_image %}
					<div class="event-card__desktop-image">
						{% if event_feature %}
						<div class="evant-card__banner event-card__banner--featured">Featured Event</div>
						{% endif %}
						<img src="{{ event_image }}">
					</div>
				{% endif %}

				<h1 class="event-card__title">{{ event_title }}</h1>
				<div class="event-card__location">{{ event_location }}</div>

			</div>

			<div class="event-card__details">
	
				{% if event_image %}
					<img class="event-card__desktop-mobile" src="{{ event_image }}">
				{% endif %}
				<div class="event-card__meta">
					{% if event_time %}
						<div class="event-card__icon event-card__time">{{ event_time }}</div>
					{% endif %}

					{% if event_location %}
						<a class="event-card__icon event-card__map">View on map</a>
						<a class="event-card__icon event-card__location-desktop">{{ event_location }}</a>
					{% endif %}

					{% if event_website %}
						<a class="event-card__icon event-card__website">{{ event_website }}</a>
					{% endif %}

					{% if event_phone %}
						<a href="tel:{{ event_phone }}" class="event-card__icon event-card__phone">{{ event_phone }}</a>
					{% endif %}

					{% if event_email %}
						<a class="event-card__icon event-card__email">{{ event_email }}</a>
					{% endif %}
				</div>
				<p>{{ event_description }}</p>

				{% if event_cta %}
					<div class="center-text">
						<a href="event_cta" class="button">Book now</a>
					</div>
				{% endif %}
			</div>
			<hr />
			<div class="center-text">
				<div class="event-card__icon event-card__more"></div>
			</div>
		</article>
	</div>
	<!-- EVENT CARD END -->
</div>
<!-- PARENT CONTAINER END -->

{
    "event_date": "26 SEPTEMBER",
    "event_day": "WEDNESDAY",
    "event_title": "Comedy Night with Andy Kind",
    "event_location": "St Jude\u2019s Church, Liverpool",
    "event_time": "10-12am",
    "event_email": "email@tearfund.org",
    "event_phone": "01234 567890",
    "event_website": "www.tearfund.org",
    "event_image": "https:\/\/images.unsplash.com\/photo-1471086569966-db3eebc25a59?ixlib=rb-0.3.5&s=7fc5fb9bc96aae0d6dfc36bb4839e758&auto=format&fit=crop&w=1350&q=80",
    "event_description": "Join us for an evening of comedy for all the family from award-winning comedian Andy Kind.",
    "event_cta": true,
    "event_feature": false
}