Zero Deaths Maryland Component Library

Event Details 

<!-- Event Details -->
<div class="event_day_location_details">
    <div class="event_detail">
        <span class="event_detail_label_title">Day & Time</span><br />
        <span class="event_detail_hint">Day and time</span>
        <span class="event_detail_label">
            <span class="event_detail_label_date">
                Saturday July 01, 2017
            </span>

            5:00 PM
        </span>
    </div>
    <div class="event_detail">
        <span class="event_detail_label_title">Location</span><br />
        <span class="event_detail_hint">Location</span>
        <span class="event_detail_label">Location Title</span>
    </div>

    <div class="event_detail event_details_categories">
        <div class="event_detail event_detail_category">
            <span class="event_detail_hint">Categories:</span>
            <span class="event_detail_label_title">Category</span><br />
            <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>

    <div class="event_detail">
        <div class="event_actions">
            <div class="event_actions_header">
                <h2 class="event_actions_title" id="event_actions_title">
                    <span class="event_actions_title_label">Event Actions</span>
                </h2>
            </div>
            <div class="event_actions_body">
                <ul class="event_actions_list" aria-labelledby="event_actions_title">
                    <li class="event_action">

                        <a href="#" class="event_action_link">
                            <span class="event_action_link_inner">
                                <span class="event_action_link_label">Register</span>
                                <span class="event_action_link_icon" aria-hidden="true">
                                    <span class="event_action_link_icon_inner">
                                        <span class="event_action_link_icon_space">&#xfeff;</span>
                                        <svg class="icon icon_arrow_right">
                                            <use xlink:href="/images/icons.svg#arrow_right"></use>

                                        </svg>
                                    </span>
                                </span>
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- END: Event Details -->
 
<!-- Event Details -->
<div class="event_day_location_details">
	<div class="event_detail">
		<span class="event_detail_label_title">Day & Time</span><br />
		<span class="event_detail_hint">Day and time</span>
		<span class="event_detail_label">
			<span class="event_detail_label_date">
				{{ item.date.from.begin|date('l F d, Y') }}
			</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 %}
				– <br />
				<span class="event_detail_label_date">
					{{ item.date.to.begin|date('l F d, Y') }}
				</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_label_title">Location</span><br />
			<span class="event_detail_hint">Location</span>
			<span class="event_detail_label">{{ item.location }}</span>
		</div>
	{% endif %}

	<div class="event_detail event_details_categories">
		{% if item.categories %}
			<div class="event_detail event_detail_category">
				<span class="event_detail_hint">Categories:</span>
				<span class="event_detail_label_title">Category</span><br />
				<ul class="event_detail_list" aria-label="Categories">
					{% for category in item.categories %}
						<li class="event_detail_item">
							<a class="event_detail_link"
								href="{{ item.category_url }}">
								{{ category }}
							</a>
						</li>
					{% endfor %}
				</ul>
			</div>
		{% endif %}
	</div>

	<div class="event_detail">
		{% render '@partial-event-actions' %}
	</div>
</div>
<!-- END: Event Details -->

No notes defined.