JHU SOE Component Library

Event Meta 

<!-- Event Meta -->
<div class="event_meta" id="meta" data-type="event" data-category="">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="event_meta_inner">
                <div class="event_meta_body">
                    <div class="event_meta_details">
                        <div class="event_meta_detail event_meta_category">
                            <span class="event_meta_detail_hint">Category</span>
                            <span class="event_meta_detail_label"></span>
                        </div>
                        <div class="event_meta_detail event_meta_date">
                            <span class="event_meta_detail_hint">Date & Time</span>
                            <span class="event_meta_detail_label">
                                <span class="event_meta_detail_label_date">Jan 10</span> </span>
                        </div>
                    </div>
                </div>
                <div class="event_meta_share">

                    <div class="share_tools ">
                        <div class="share_tools_header">
                            <h2 class="share_tools_title">Share Options</h2>
                        </div>
                        <ul class="share_tools_list" aria-label="Share Options">
                            <li class="share_tool_item">
                                <a class="share_tool" href="#" target="_blank" rel="noopener">
                                    <span class="share_tool_icon">
                                        <svg class="icon icon_facebook">
                                            <use href="/images/icons.svg#facebook" />
                                        </svg>
                                    </span>
                                    <span class="share_tool_label">Share to Facebook</span>
                                </a>
                            </li>
                            <li class="share_tool_item">
                                <a class="share_tool" href="#" target="_blank" rel="noopener">
                                    <span class="share_tool_icon">
                                        <svg class="icon icon_twitter">
                                            <use href="/images/icons.svg#twitter" />
                                        </svg>
                                    </span>
                                    <span class="share_tool_label">Share to Twitter</span>
                                </a>
                            </li>
                            <li class="share_tool_item">
                                <a class="share_tool" href="#" target="_blank" rel="noopener">
                                    <span class="share_tool_icon">
                                        <svg class="icon icon_linkedin">
                                            <use href="/images/icons.svg#linkedin" />
                                        </svg>
                                    </span>
                                    <span class="share_tool_label">Share to Linkedin</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Event Meta -->
 
{#
	{% include '@partial-event-meta' with {
		page: page
	} %}
#}
<!-- Event Meta -->
<div class="event_meta" id="meta" data-type="event" data-category="{{ page.meta.category }}">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="event_meta_inner">
				<div class="event_meta_body">
					<div class="event_meta_details">
						<div class="event_meta_detail event_meta_category">
							<span class="event_meta_detail_hint">Category</span>
							<span class="event_meta_detail_label">{{ page.meta.category }}</span>
						</div>
						<div class="event_meta_detail event_meta_date">
							<span class="event_meta_detail_hint">Date & Time</span>
							<span class="event_meta_detail_label">
								<span class="event_meta_detail_label_date">{{ page.meta.date.from|date('M d') }}{% if page.meta.date.same_day == false %} - {{ page.meta.date.to|date('M d') }}{% endif %}</span>{% if page.meta.date.same_day == true %}, <span class="event_meta_detail_label_time">{{ page.meta.date.from|date('g') }} - {{ page.meta.date.to|date('ga') }}</span>{% endif %}
							</span>
						</div>
						{% if page.meta.location %}
							<div class="event_meta_detail event_meta_location">
								<span class="event_meta_detail_hint">Location</span>
								<span class="event_meta_detail_label">
									{% if page.meta.location.url %}
										<a class="event_meta_detail_label_link" href="{{ page.meta.location.url }}">
											<span class="event_meta_detail_label_link_label">{{ page.meta.location.label }}</span>
										</a>
									{% else %}
										{{ page.meta.location.label }}
									{% endif %}
								</span>
							</div>
						{% endif %}
						{% if page.meta.type %}
							<div class="event_meta_detail event_meta_type">
								<span class="event_meta_detail_hint">Type</span>
								<span class="event_meta_detail_label">
									{% if page.meta.type.url %}
										<a class="event_meta_detail_label_link" href="{{ page.meta.type.url }}">
											<span class="event_meta_detail_label_link_label">{{ page.meta.type.label }}</span>
										</a>
									{% else %}
										{{ page.meta.type.label }}
									{% endif %}
								</span>
							</div>
						{% endif %}
						{% if page.meta.format %}
							<div class="event_meta_detail event_meta_format">
								<span class="event_meta_detail_hint">Format</span>
								<span class="event_meta_detail_label">
									{% if page.meta.format.url %}
										<a class="event_meta_detail_label_link" href="{{ page.meta.format.url }}">
											<span class="event_meta_detail_label_link_label">{{ page.meta.format.label }}</span>
										</a>
									{% else %}
										{{ page.meta.format.label }}
									{% endif %}
								</span>
							</div>
						{% endif %}
					</div>
				</div>
				<div class="event_meta_share">
					{% include '@partial-share' with {
						print: false,
						items: ['Facebook', 'Twitter', 'Linkedin']
					} %}
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Event Meta -->

No notes defined.