JHU India Component Library

Event Meta 

<div class="event_meta" id="meta" data-type="event" data-category="Category 1">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="event_meta_inner">
                <div class="event_meta_body">
                    <!-- Event Details -->
                    <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>
                    <!-- END: Event Details -->
                </div>

                <div class="js-share-tools share_tools">
                    <div class="share_tools_header">
                        <h2 class="share_tools_title">Share Options</h2>
                        <button class="js-share-tools-toggle share_tools_toggle" data-swap-target=".js-share-tools">
                            <span class="share_tools_toggle_inner">
                                <span class="share_tools_toggle_label">Share This</span>
                            </span>
                        </button>
                    </div>
                    <ul class="js-share-tools-list share_tools_list" aria-label="Share Options">
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="event_meta" id="meta" data-type="event" data-category="{% for item in item.categories %}{{ item }}{% if not loop.last %}, {% endif %}{% endfor %}">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="event_meta_inner">
				<div class="event_meta_body">
					{% render "@partial-event-details" with {
						item: item
					} %}
				</div>
				{% include "@partial-share" with {
					title: "Share This",
					icon: ""
				} %}
			</div>
		</div>
	</div>
</div>

No notes defined.