Paul Smith's College 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 fs-lg-10 fs-all-justify-center">
            <div class="event_meta_inner">
                <div class="event_meta_details">
                    <div class="event_meta_detail">
                        <div class="event_meta_detail_label">Time<span class="event_meta_detail_label_hint">:</span></div>
                        <div class="event_meta_detail_description">
                            <span class="event_meta_detail_description_icon">
                                <svg class="icon icon_clock">
                                    <use href="/images/icons.svg#clock" />
                                </svg>
                            </span>
                            <span class="event_meta_detail_description_label">9:00 AM - 11:00 AM</span>
                        </div>
                    </div>
                    <div class="event_meta_detail">
                        <div class="event_meta_detail_label">Date<span class="event_meta_detail_label_hint">:</span></div>
                        <div class="event_meta_detail_description">
                            <span class="event_meta_detail_description_icon">
                                <svg class="icon icon_calendar">
                                    <use href="/images/icons.svg#calendar" />
                                </svg>
                            </span>
                            <time class="event_meta_detail_description_label" datetime="2024-05-04 09:00:00">
                                <span class="event_meta_detail_start">May 04, 2024</span>
                            </time>
                        </div>
                    </div>
                    <div class="event_meta_detail">
                        <div class="event_meta_detail_label">Cost<span class="event_meta_detail_label_hint">:</span></div>
                        <div class="event_meta_detail_description">
                            <span class="event_meta_detail_description_icon">
                                <svg class="icon icon_money">
                                    <use href="/images/icons.svg#money" />
                                </svg>
                            </span>
                            <span class="event_meta_detail_description_label">Free - $10</span>
                        </div>
                    </div>
                    <div class="event_meta_detail">
                        <div class="event_meta_detail_label">Location<span class="event_meta_detail_label_hint">:</span></div>
                        <div class="event_meta_detail_description">
                            <span class="event_meta_detail_description_icon">
                                <svg class="icon icon_place">
                                    <use href="/images/icons.svg#place" />
                                </svg>
                            </span>
                            <span class="event_meta_detail_description_label">Paul Smith's VIC</span>
                        </div>
                    </div>
                    <div class="event_meta_detail">
                        <div class="event_meta_detail_label">Category<span class="event_meta_detail_label_hint">:</span></div>
                        <div class="event_meta_detail_items">
                            <span class="event_meta_detail_item">Campus Tradition</span>
                            <span class="event_meta_detail_item">Community</span>
                            <span class="event_meta_detail_item">Paul Smith's VIC</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Event Meta -->
 
{#
	{% include '@partial-event-meta' with {
		item: {
			date: {
				same_day: false,
				all_day: false,
				from: '2023-05-31 17:00:00',
				to: '2023-06-13 19:00:00'
			},
			location: 'Location',
			categories: [
				'Category'
			]
		}
	} %}
#}
<!-- Event Meta -->
<div class="event_meta" id="meta" data-type="event" data-category="{% for category in item.categories %}{{ category.label }}{% if not loop.last %}, {% endif %}{% endfor %}">
	<div class="fs-row">
		<div class="fs-cell fs-lg-10 fs-all-justify-center">
			<div class="event_meta_inner">
				<div class="event_meta_details">
					{% if item.date.all_day == false %}
						<div class="event_meta_detail">
							<div class="event_meta_detail_label">Time<span class="event_meta_detail_label_hint">:</span></div>
							<div class="event_meta_detail_description">
								<span class="event_meta_detail_description_icon">{{ icon('clock') }}</span>
								<span class="event_meta_detail_description_label">{{ item.date.from|date('g:i A') }} - {{ item.date.to|date('g:i A') }}</span>
							</div>
						</div>
					{% endif %}
					<div class="event_meta_detail">
						<div class="event_meta_detail_label">Date<span class="event_meta_detail_label_hint">:</span></div>
						<div class="event_meta_detail_description">
							<span class="event_meta_detail_description_icon">{{ icon('calendar') }}</span>
							<time class="event_meta_detail_description_label" datetime="{{ item.date.from }}">
								<span class="event_meta_detail_start">{{ item.date.from|date('M d, Y') }}</span>
								{% if item.date.same_day == false %}
									<span class="event_meta_detail_end"> - {{ item.date.to|date('M d, Y') }}</span>
								{% endif %}
							</time>
						</div>
					</div>
					{% if item.cost %}
						<div class="event_meta_detail">
							<div class="event_meta_detail_label">Cost<span class="event_meta_detail_label_hint">:</span></div>
							<div class="event_meta_detail_description">
								<span class="event_meta_detail_description_icon">{{ icon('money') }}</span>
								<span class="event_meta_detail_description_label">{{ item.cost }}</span>
							</div>
						</div>
					{% endif %}
					{% if item.location %}
						<div class="event_meta_detail">
							<div class="event_meta_detail_label">Location<span class="event_meta_detail_label_hint">:</span></div>
							<div class="event_meta_detail_description">
								<span class="event_meta_detail_description_icon">{{ icon('place') }}</span>
								<span class="event_meta_detail_description_label">{{ item.location }}</span>
							</div>
						</div>
					{% endif %}
					<div class="event_meta_detail">
						<div class="event_meta_detail_label">Category<span class="event_meta_detail_label_hint">:</span></div>
						<div class="event_meta_detail_items">
							{% for item in item.categories %}
								<span class="event_meta_detail_item">{{ item }}</span>
							{% endfor %}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Event Meta -->

No notes defined.