Heinz History Center Component Library

Meta 

<div class="meta_info" id="meta_info">
    <script type="application/ld+json">
        {
            '@context': 'http://schema.org',
            '@type': 'Organization',
            'name': 'Heinz History Center',
            'logo': '//heinz.dev.fastspot.com/images/logo-schema.png',
            'address': [{
                '@type': 'PostalAddress',
                'streetAddress': '1212 Smallman Street',
                'addressLocality': '',
                'addressRegion': 'PA',
                'postalCode': '15222"
            }, {
                '@type': 'PostalAddress',
                'streetAddress': '1212 Smallman Street',
                'addressLocality': '',
                'addressRegion': 'PA',
                'postalCode': '15222"
            }, {
                '@type': 'PostalAddress',
                'streetAddress': '1212 Smallman Street',
                'addressLocality': '',
                'addressRegion': 'PA',
                'postalCode': '15222"
            }, {
                '@type': 'PostalAddress',
                'streetAddress': '1212 Smallman Street',
                'addressLocality': '',
                'addressRegion': 'PA',
                'postalCode': '15222"
            }],
            'email': 'info@heinzhistorycenter.org',
            'url': '//heinz.dev.fastspot.com',
            'sameAs': [
                '//www.facebook.com',
                '//www.instagram.com',
                '//www.twitter.com',
                '//www.youtube.com',
                'mailto:info@heinzhistorycenter.org',
                '//www.tiktok.com'
            ]
        }
    </script>
    <div class="meta_info_details">
        <div class="meta_info_details_locations">
            <div class="meta_info_details_location">
                <div class="meta_info_detail meta_info_detail_address color_red js-meta-location-1">

                    <button class="js-meta-info-detail-address-toggle js-swap meta_info_detail_address_toggle " data-swap-target=".js-meta-location-1" data-swap-group="footer_locations" data-swap-options='{"collapse": false}'>
                        <span class="meta_info_detail_address_toggle_inner_default meta_info_detail_address_toggle_inner">
                            <span class="meta_info_detail_address_toggle_label_default meta_info_detail_address_toggle_label">Heinz History Center</span>
                            <span class="meta_info_detail_address_toggle_icon_default meta_info_detail_address_toggle_icon" aria-hidden="true">

                                <svg class="icon icon_caret_down">
                                    <use href="/images/icons.svg#caret_down" />
                                </svg>

                            </span>
                        </span>
                        <span class="meta_info_detail_address_toggle_inner_active meta_info_detail_address_toggle_inner">
                            <span class="meta_info_detail_address_toggle_label_active meta_info_detail_address_toggle_label">Heinz History Center</span>
                            <span class="meta_info_detail_address_toggle_icon_active meta_info_detail_address_toggle_icon" aria-hidden="true">

                                <svg class="icon icon_caret_up">
                                    <use href="/images/icons.svg#caret_up" />
                                </svg>

                            </span>
                        </span>
                    </button>
                    <div class="meta_info_detail_data">
                        <a class="meta_info_detail_label meta_info_detail_link" href="//www.google.com/maps/place/?q=place_id:ChIJofvP7nsEyIkRAppsAwqW4SQ" target="_blank" rel="noopener">
                            <span class="meta_info_address_street">1212 Smallman Street,</span>
                            <span class="meta_info_address_group">
                                <span class="meta_info_address_city">Pittsburgh,</span>
                                <span class="meta_info_address_state">PA</span>
                                <span class="meta_info_address_zip">15222</span>
                            </span>
                        </a>
                        <a href="tel:(412) 454-6000" class="meta_info_detail_link">(412) 454-6000</a>
                    </div>
                </div>
            </div>
            <div class="meta_info_details_location">
                <div class="meta_info_detail meta_info_detail_address color_blue js-meta-location-2">

                    <button class="js-meta-info-detail-address-toggle js-swap meta_info_detail_address_toggle " data-swap-target=".js-meta-location-2" data-swap-group="footer_locations" data-swap-options='{"collapse": false}'>
                        <span class="meta_info_detail_address_toggle_inner_default meta_info_detail_address_toggle_inner">
                            <span class="meta_info_detail_address_toggle_label_default meta_info_detail_address_toggle_label">Western Pennsylvania Sports Museum</span>
                            <span class="meta_info_detail_address_toggle_icon_default meta_info_detail_address_toggle_icon" aria-hidden="true">

                                <svg class="icon icon_caret_down">
                                    <use href="/images/icons.svg#caret_down" />
                                </svg>

                            </span>
                        </span>
                        <span class="meta_info_detail_address_toggle_inner_active meta_info_detail_address_toggle_inner">
                            <span class="meta_info_detail_address_toggle_label_active meta_info_detail_address_toggle_label">Western Pennsylvania Sports Museum</span>
                            <span class="meta_info_detail_address_toggle_icon_active meta_info_detail_address_toggle_icon" aria-hidden="true">

                                <svg class="icon icon_caret_up">
                                    <use href="/images/icons.svg#caret_up" />
                                </svg>

                            </span>
                        </span>
                    </button>
                    <div class="meta_info_detail_data">
                        <a class="meta_info_detail_label meta_info_detail_link" href="//www.google.com/maps/place/?q=place_id:ChIJofvP7nsEyIkRAppsAwqW4SQ" target="_blank" rel="noopener">
                            <span class="meta_info_address_street">1212 Smallman Street,</span>
                            <span class="meta_info_address_group">
                                <span class="meta_info_address_city">Pittsburgh,</span>
                                <span class="meta_info_address_state">PA</span>
                                <span class="meta_info_address_zip">15222</span>
                            </span>
                        </a>
                        <a href="tel:(412) 454-6000" class="meta_info_detail_link">(412) 454-6000</a>
                    </div>
                </div>
            </div>
            <div class="meta_info_details_location">
                <div class="meta_info_detail meta_info_detail_address color_green js-meta-location-3">

                    <button class="js-meta-info-detail-address-toggle js-swap meta_info_detail_address_toggle " data-swap-target=".js-meta-location-3" data-swap-group="footer_locations" data-swap-options='{"collapse": false}'>
                        <span class="meta_info_detail_address_toggle_inner_default meta_info_detail_address_toggle_inner">
                            <span class="meta_info_detail_address_toggle_label_default meta_info_detail_address_toggle_label">Meadowcroft Rockshelter & Historic Village</span>
                            <span class="meta_info_detail_address_toggle_icon_default meta_info_detail_address_toggle_icon" aria-hidden="true">

                                <svg class="icon icon_caret_down">
                                    <use href="/images/icons.svg#caret_down" />
                                </svg>

                            </span>
                        </span>
                        <span class="meta_info_detail_address_toggle_inner_active meta_info_detail_address_toggle_inner">
                            <span class="meta_info_detail_address_toggle_label_active meta_info_detail_address_toggle_label">Meadowcroft Rockshelter & Historic Village</span>
                            <span class="meta_info_detail_address_toggle_icon_active meta_info_detail_address_toggle_icon" aria-hidden="true">

                                <svg class="icon icon_caret_up">
                                    <use href="/images/icons.svg#caret_up" />
                                </svg>

                            </span>
                        </span>
                    </button>
                    <div class="meta_info_detail_data">
                        <a class="meta_info_detail_label meta_info_detail_link" href="//www.google.com/maps/place/?q=place_id:ChIJofvP7nsEyIkRAppsAwqW4SQ" target="_blank" rel="noopener">
                            <span class="meta_info_address_street">1212 Smallman Street,</span>
                            <span class="meta_info_address_group">
                                <span class="meta_info_address_city">Pittsburgh,</span>
                                <span class="meta_info_address_state">PA</span>
                                <span class="meta_info_address_zip">15222</span>
                            </span>
                        </a>
                        <a href="tel:(412) 454-6000" class="meta_info_detail_link">(412) 454-6000</a>
                    </div>
                </div>
            </div>
            <div class="meta_info_details_location">
                <div class="meta_info_detail meta_info_detail_address color_yellow js-meta-location-4">

                    <button class="js-meta-info-detail-address-toggle js-swap meta_info_detail_address_toggle " data-swap-target=".js-meta-location-4" data-swap-group="footer_locations" data-swap-options='{"collapse": false}'>
                        <span class="meta_info_detail_address_toggle_inner_default meta_info_detail_address_toggle_inner">
                            <span class="meta_info_detail_address_toggle_label_default meta_info_detail_address_toggle_label">Fort Pitt Museum</span>
                            <span class="meta_info_detail_address_toggle_icon_default meta_info_detail_address_toggle_icon" aria-hidden="true">

                                <svg class="icon icon_caret_down">
                                    <use href="/images/icons.svg#caret_down" />
                                </svg>

                            </span>
                        </span>
                        <span class="meta_info_detail_address_toggle_inner_active meta_info_detail_address_toggle_inner">
                            <span class="meta_info_detail_address_toggle_label_active meta_info_detail_address_toggle_label">Fort Pitt Museum</span>
                            <span class="meta_info_detail_address_toggle_icon_active meta_info_detail_address_toggle_icon" aria-hidden="true">

                                <svg class="icon icon_caret_up">
                                    <use href="/images/icons.svg#caret_up" />
                                </svg>

                            </span>
                        </span>
                    </button>
                    <div class="meta_info_detail_data">
                        <a class="meta_info_detail_label meta_info_detail_link" href="//www.google.com/maps/place/?q=place_id:ChIJofvP7nsEyIkRAppsAwqW4SQ" target="_blank" rel="noopener">
                            <span class="meta_info_address_street">1212 Smallman Street,</span>
                            <span class="meta_info_address_group">
                                <span class="meta_info_address_city">Pittsburgh,</span>
                                <span class="meta_info_address_state">PA</span>
                                <span class="meta_info_address_zip">15222</span>
                            </span>
                        </a>
                        <a href="tel:(412) 454-6000" class="meta_info_detail_link">(412) 454-6000</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
{#
	{% render '@partial-meta' %}

	Google Maps, Find the ID of a particular place - https://developers.google.com/places/place-id
#}
<div class="meta_info" id="meta_info">
	<script type="application/ld+json">
		{
			'@context': 'http://schema.org',
			'@type': '{{ config.schema_type }}',
			'name': '{{ config.name }}',
			'logo': '//{{ config.domain }}/images/logo-schema.png',
			'address': [
				{% for location in config.locations %}
				{
					'@type': 'PostalAddress',
					'streetAddress': '{{ location.street }}',
					'addressLocality': '{{ config.city }}',
					'addressRegion': '{{ location.state }}',
					'postalCode': '{{ location.zip }}"
				}{% if not loop.last %},{% endif %}
				{% endfor %}
			],
			{% if config.email %}'email': '{{ config.email }}',{% endif %}
			{% if config.phone %}'telephone': '{{ config.phone }}',{% endif %}
			'url': '//{{ config.domain }}',
			{% if navigation.social %}
				'sameAs': [
				{% for social in navigation.social %}
					'{{ social.url }}'
					{% if not loop.last %},
					{% endif %}
				{% endfor %}
				]
		{% endif %}
		}
	</script>
	<div class="meta_info_details">
		{% if config.locations %}
		<div class="meta_info_details_locations">
			{% for location in config.locations %}
			<div class="meta_info_details_location">
				<div class="meta_info_detail meta_info_detail_address color_{{ location.color }} js-meta-location-{{ loop.index }}">
					{% include "@partial-button-toggle" with {
						class: "meta_info_detail_address",
						title: location.title,
						icon: "caret_down",
						active_title: location.title,
						active_icon: "caret_up",
						swap_target: ".js-meta-location-" ~ loop.index,
						swap_group: "footer_locations",
						no_collapse: true
					} %}
					<div class="meta_info_detail_data">
						<a class="meta_info_detail_label meta_info_detail_link" href="//www.google.com/maps/place/?q=place_id:{{ location.place_id }}" target="_blank" rel="noopener">
							<span class="meta_info_address_street">{{ location.street }},</span>
							<span class="meta_info_address_group">
								<span class="meta_info_address_city">{{ location.city }},</span>
								<span class="meta_info_address_state">{{ location.state }}</span>
								<span class="meta_info_address_zip">{{ location.zip }}</span>
							</span>
						</a>
						<a href="tel:{{ location.phone }}" class="meta_info_detail_link">{{ location.phone }}</a>
					</div>
				</div>
			</div>
			{% endfor %}
		</div>
		{% endif %}
	</div>
</div>

No notes defined.