<div class="event_details">
    <div class="event_detail">
        <span class="event_detail_icon">
            <svg class="icon icon_clock">
                <use href="/images/icons.svg#clock" />
            </svg>
        </span>
        <span class="event_detail_hint">Time:&nbsp;</span>
        <span class="event_detail_label">
            <span class="event_detail_label_date">May 31</span>
            5:00 PM - 7:00 PM
            – <span class="event_detail_label_date">Jun 13</span>
            5:00 PM - 7:00 PM
        </span>
    </div>
    <div class="event_detail">
        <span class="event_detail_icon">
            <svg class="icon icon_place">
                <use href="/images/icons.svg#place" />
            </svg>
        </span>
        <span class="event_detail_hint">Location:&nbsp;</span>
        <span class="event_detail_label">Location</span>
    </div>
    <div class="event_detail event_detail_category">
        <span class="event_detail_icon">
            <svg class="icon icon_label">
                <use href="/images/icons.svg#label" />
            </svg>
        </span>
        <span class="event_detail_hint">Categories:&nbsp;</span>
        <ul class="event_detail_list" aria-label="Categories">
            <li class="event_detail_item">
                <a class="event_detail_link" href="page-event-category.html">Category 1</a>
            </li>
        </ul>
    </div>
</div>
{#
	{% include '@partial-event-details' with {
		item: {
			date: {
				from: {
					begin: '2017-05-31 17:00:00',
					end: '2017-05-31 19:00:00'
				},
				to: {
					begin: '2017-06-13 17:00:00',
					end: '2017-06-13 19:00:00'
				}
			},
			location: 'Location',
			categories: [
				{
					label: 'Category',
					url: '#'
				}
			]
		}
	} %}
#}
<div class="event_details">
	<div class="event_detail">
		<span class="event_detail_icon">{{ icon('clock') }}</span>
		<span class="event_detail_hint">Time:&nbsp;</span>
		<span class="event_detail_label">
			<span class="event_detail_label_date">{{ item.date.from.begin|date('M d') }}</span>
			{{ item.date.from.begin|date('g:i A') }}{{ item.date.from.end ? " - " ~ item.date.from.end|date('g:i A') }}
			{% if item.date.to %}<span class="event_detail_label_date">{{ item.date.to.begin|date('M d') }}</span>
				{{ item.date.to.begin|date('g:i A') }}{{ item.date.to.end ? " - " ~ item.date.to.end|date('g:i A') }}
			{% endif %}
		</span>
	</div>
	{% if item.location %}
		<div class="event_detail">
			<span class="event_detail_icon">{{ icon('place') }}</span>
			<span class="event_detail_hint">Location:&nbsp;</span>
			<span class="event_detail_label">{{ item.location }}</span>
		</div>
	{% endif %}
	{% if item.categories %}
		<div class="event_detail event_detail_category">
			<span class="event_detail_icon">{{ icon('label') }}</span>
			<span class="event_detail_hint">Categories:&nbsp;</span>
			<ul class="event_detail_list" aria-label="Categories">
				{% for category in item.categories %}
					<li class="event_detail_item">
						<a class="event_detail_link" href="{{ category.url }}">{{ category.label }}</a>
					</li>
				{% endfor %}
			</ul>
		</div>
	{% endif %}
</div>

No notes defined.