Framework Component Library

Event Meta 

<script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "Event",
        "location": {
            "@type": "Place",
            "address": {
                "@type": "PostalAddress",
                "addressLocality": "Baltimore",
                "addressRegion": "MD",
                "postalCode": "21211",
                "streetAddress": "2980 Falls Road"
            },
            "name": "Nam quam nunc, blandit vel<br>luctus pulvinar<br>hendrerit id"
        },
        "name": "In Enim Justo Rhoncus Ut",
        "image": "https://images.fastspot.com/framework/1440x1440/1",
        "description": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus.",
        "startDate": "2023-05-31 17:00:00",
        "endDate": "2023-06-13 19:00:00",
        "offers": {
            "@type": "Offer",
            "url": "#"
        }
    }
</script>

<!-- Event Meta -->
<div class="event_meta" id="event_meta_1">
    <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">
                            <span class="event_meta_detail_icon" aria-hidden="true">
                                <svg class="icon icon_clock">
                                    <use href="/images/icons.svg#clock" />
                                </svg>
                            </span>
                            <span class="event_meta_detail_hint">
                                Time:&nbsp;
                            </span>
                            <span class="event_meta_detail_label">
                                May 31
                                &nbsp;- Jun 13
                                &nbsp;|&nbsp;
                                5:00 PM - 7:00 PM
                            </span>
                        </div>
                        <div class="event_meta_detail">
                            <span class="event_meta_detail_icon" aria-hidden="true">
                                <svg class="icon icon_place">
                                    <use href="/images/icons.svg#place" />
                                </svg>
                            </span>
                            <span class="event_meta_detail_hint">
                                Location:&nbsp;
                            </span>
                            <span class="event_meta_detail_label">
                                Nam quam nunc, blandit vel<br>luctus pulvinar<br>hendrerit id
                            </span>
                        </div>
                        <div class="event_meta_detail event_meta_detail_category">
                            <span class="event_meta_detail_icon" aria-hidden="true">
                                <svg class="icon icon_label">
                                    <use href="/images/icons.svg#label" />
                                </svg>
                            </span>
                            <span class="event_meta_detail_hint" id="event_meta_1_detail_hint_category">
                                Categories:&nbsp;
                            </span>
                            <ul class="event_meta_detail_list" aria-labelledby="event_meta_1_detail_hint_category">
                                <li class="event_meta_detail_item">

                                    <a class="
		button_text
				
	" href="#">
                                        <span class="button_text_inner">
                                            <span class="button_text_label">
                                                Aenean massa
                                            </span>
                                        </span>
                                    </a>
                                </li>
                                <li class="event_meta_detail_item">

                                    <a class="
		button_text
				
	" href="#">
                                        <span class="button_text_inner">
                                            <span class="button_text_label">
                                                Vestibulum purus quam
                                            </span>
                                        </span>
                                    </a>
                                </li>
                                <li class="event_meta_detail_item">

                                    <a class="
		button_text
				
	" href="#">
                                        <span class="button_text_inner">
                                            <span class="button_text_label">
                                                Maecenas malesuada
                                            </span>
                                        </span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="event_meta_share">

                    <div class="share_tools direction_left" id="share_tools_1" data-js-share-tools>
                        <div class="share_tools_header">
                            <h2 class="share_tools_title" id="share_tools_1_title">
                                Share Options
                            </h2>
                            <div class="share_tools_button">

                                <button class="
		button_filled
					button_filled_large
				
	" data-js-share-tools-toggle="" data-swap-target="#share_tools_1">
                                    <span class="button_filled_inner">
                                        <span class="button_filled_label">Share This</span>
                                    </span>
                                </button>
                            </div>
                        </div>
                        <ul class="share_tools_list" data-js-share-tools-list aria-labelledby="share_tools_1_title">
                            <li class="share_tool_item" data-js-share-tool-item>

                                <a class="
		share_tool
				
	" data-js-share-tool="x" target="_blank" rel="noopener" title="opens in a new window" href="#">
                                    <span class="share_tool_inner">
                                        <span class="share_tool_label">
                                            Share to X
                                        </span>
                                        <span class="share_tool_icon" aria-hidden="true">
                                            <svg class="icon icon_x">
                                                <use href="/images/icons.svg#x" />
                                            </svg>
                                        </span>
                                    </span>
                                </a>
                            </li>
                            <li class="share_tool_item" data-js-share-tool-item>

                                <a class="
		share_tool
				
	" data-js-share-tool="facebook" target="_blank" rel="noopener" title="opens in a new window" href="#">
                                    <span class="share_tool_inner">
                                        <span class="share_tool_label">
                                            Share to Facebook
                                        </span>
                                        <span class="share_tool_icon" aria-hidden="true">
                                            <svg class="icon icon_facebook">
                                                <use href="/images/icons.svg#facebook" />
                                            </svg>
                                        </span>
                                    </span>
                                </a>
                            </li>
                            <li class="share_tool_item" data-js-share-tool-item>

                                <a class="
		share_tool
				
	" data-js-share-tool="linkedin" target="_blank" rel="noopener" title="opens in a new window" href="#">
                                    <span class="share_tool_inner">
                                        <span class="share_tool_label">
                                            Share to Linkedin
                                        </span>
                                        <span class="share_tool_icon" aria-hidden="true">
                                            <svg class="icon icon_linkedin">
                                                <use href="/images/icons.svg#linkedin" />
                                            </svg>
                                        </span>
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Event Meta -->
 
{#
	{% include '@component-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: [
				{
					title: 'Category',
					url: '#'
				}
			]
		}
	} %}
#}

{% set id = uniqid('event_meta') %}

<script type="application/ld+json">
	{{
		{
			'@context': 'http://schema.org',
			'@type': 'Event',
			'location': {
				'@type': 'Place',
				'address': {
					'@type': 'PostalAddress',
					'addressLocality': config.city,
					'addressRegion': config.state,
					'postalCode': config.zip,
					'streetAddress': config.street
				},
			'name': item.location
			},
			'name': item.title,
			'image': 'https://images.fastspot.com/' ~ config.images ~ '/' ~ img.wide.xlrg.width ~ 'x' ~ img.wide.xlrg.width ~ '/' ~ item.image,
			'description': item.description,
			'startDate': item.date.from,
			'endDate': item.date.to,
			'offers': {
				'@type': 'Offer',
				'url': '#'
			}
		}|json_encode
	}}
</script>

<!-- Event Meta -->
<div class="event_meta" id="{{ id }}">
	<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">
							<span class="event_meta_detail_icon" aria-hidden="true">
								{{ icon('clock') }}
							</span>
							<span class="event_meta_detail_hint">
								Time:&nbsp;
							</span>
							<span class="event_meta_detail_label">
								{{ item.date.from|date('M d') }}
								{% if item.date.same_day == false %}
									&nbsp;- {{ item.date.to|date('M d') }}
								{% endif %}
								{% if item.date.same_day == false %}
									&nbsp;|&nbsp;
									{{ item.date.from|date('g:i A') }} - {{ item.date.to|date('g:i A') }}
								{% endif %}
							</span>
						</div>
						{% if item.location %}
							<div class="event_meta_detail">
								<span class="event_meta_detail_icon" aria-hidden="true">
									{{ icon('place') }}
								</span>
								<span class="event_meta_detail_hint">
									Location:&nbsp;
								</span>
								<span class="event_meta_detail_label">
									{{ item.location }}
								</span>
							</div>
						{% endif %}
						{% if item.categories %}
							<div class="event_meta_detail event_meta_detail_category">
								<span class="event_meta_detail_icon" aria-hidden="true">
									{{ icon('label') }}
								</span>
								<span
									class="event_meta_detail_hint"
									id="{{ id }}_detail_hint_category"
								>
									Categories:&nbsp;
								</span>
								<ul
									class="event_meta_detail_list"
									aria-labelledby="{{ id }}_detail_hint_category"
								>
									{% for category in item.categories %}
										<li class="event_meta_detail_item">
											{% include '@partial-link' with {
												classes: {
													base: 'button_text'
												},
												id: null,
												title: category.title,
												url: category.url
											} %}
										</li>
									{% endfor %}
								</ul>
							</div>
						{% endif %}
					</div>
				</div>
				<div class="event_meta_share">
					{% include '@partial-share' with {
						title: 'Share This',
						direction: 'left',
						icon: '',
						items: ['X', 'Facebook', 'Linkedin']
					} %}
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Event Meta -->

No notes defined.