Heinz History Center Component Library

Gallery 

<!-- Gallery -->
<div class="gallery theme_tan">
    <div class="gallery_header">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="gallery_header_inner">
                    <div class="gallery_title_wrapper">
                        <h2 class="gallery_title">Ipsum Fermentum Tristique</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="gallery_body">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="gallery_body_inner">
                    <div class="gallery_items js-carousel" data-carousel-options='{"single": true, "autoHeight": true}'>
                        <div class="gallery_item theme_history">
                            <figure class="gallery_item_figure">

                                <img class="gallery_item_image" srcset="https://images.fastspot.com/generic/980x654/1 980w, https://images.fastspot.com/generic/740x494/1 740w, https://images.fastspot.com/generic/500x334/1 500w, https://images.fastspot.com/generic/300x200/1 300w" src="https://images.fastspot.com/generic/300x200/1" alt="" loading="lazy" width="300" height="200">
                            </figure>
                            <div class="gallery_item_meta">
                                <div class="gallery_item_meta_spacer" aria-hidden="true">
                                    <div class="gallery_header_inner">
                                        <div class="gallery_title_wrapper">
                                            <h2 class="gallery_title">Ipsum Fermentum Tristique</h2>
                                        </div>
                                    </div>
                                </div>
                                <p class="gallery_item_location">Heinz History Center</p>
                            </div>
                        </div>
                        <div class="gallery_item theme_meadowcroft gallery_item_portrait">
                            <figure class="gallery_item_figure">

                                <img class="gallery_item_image" srcset="https://images.fastspot.com/generic/814x1220/2 814w, https://images.fastspot.com/generic/654x980/2 654w, https://images.fastspot.com/generic/494x740/2 494w, https://images.fastspot.com/generic/334x500/2 334w, https://images.fastspot.com/generic/200x300/2 200w" src="https://images.fastspot.com/generic/200x300/2" alt="" loading="lazy" width="200" height="300">
                            </figure>
                            <div class="gallery_item_meta">
                                <div class="gallery_item_meta_spacer" aria-hidden="true">
                                    <div class="gallery_header_inner">
                                        <div class="gallery_title_wrapper">
                                            <h2 class="gallery_title">Ipsum Fermentum Tristique</h2>
                                        </div>
                                    </div>
                                </div>
                                <p class="gallery_item_location">Meadowcroft Rockshelter</p>
                                <p class="gallery_item_caption">Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.</p>
                            </div>
                        </div>
                        <div class="gallery_item theme_sports">
                            <figure class="gallery_item_figure">

                                <img class="gallery_item_image" srcset="https://images.fastspot.com/generic/980x654/3 980w, https://images.fastspot.com/generic/740x494/3 740w, https://images.fastspot.com/generic/500x334/3 500w, https://images.fastspot.com/generic/300x200/3 300w" src="https://images.fastspot.com/generic/300x200/3" alt="" loading="lazy" width="300" height="200">
                            </figure>
                            <div class="gallery_item_meta">
                                <div class="gallery_item_meta_spacer" aria-hidden="true">
                                    <div class="gallery_header_inner">
                                        <div class="gallery_title_wrapper">
                                            <h2 class="gallery_title">Ipsum Fermentum Tristique</h2>
                                        </div>
                                    </div>
                                </div>
                                <p class="gallery_item_location">Sports Museum</p>
                                <p class="gallery_item_caption">Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.</p>
                            </div>
                        </div>
                        <div class="gallery_item theme_fort gallery_item_portrait">
                            <figure class="gallery_item_figure">

                                <img class="gallery_item_image" srcset="https://images.fastspot.com/generic/814x1220/4 814w, https://images.fastspot.com/generic/654x980/4 654w, https://images.fastspot.com/generic/494x740/4 494w, https://images.fastspot.com/generic/334x500/4 334w, https://images.fastspot.com/generic/200x300/4 200w" src="https://images.fastspot.com/generic/200x300/4" alt="" loading="lazy" width="200" height="300">
                            </figure>
                            <div class="gallery_item_meta">
                                <div class="gallery_item_meta_spacer" aria-hidden="true">
                                    <div class="gallery_header_inner">
                                        <div class="gallery_title_wrapper">
                                            <h2 class="gallery_title">Ipsum Fermentum Tristique</h2>
                                        </div>
                                    </div>
                                </div>
                                <p class="gallery_item_location">Fort Pitt Museum</p>
                                <p class="gallery_item_caption">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec <a href="#">ullamcorper nulla non metus auctor fringilla</a>.</p>
                            </div>
                        </div>
                        <div class="gallery_item theme_history">
                            <figure class="gallery_item_figure">

                                <img class="gallery_item_image" srcset="https://images.fastspot.com/generic/980x654/5 980w, https://images.fastspot.com/generic/740x494/5 740w, https://images.fastspot.com/generic/500x334/5 500w, https://images.fastspot.com/generic/300x200/5 300w" src="https://images.fastspot.com/generic/300x200/5" alt="" loading="lazy" width="300" height="200">
                            </figure>
                            <div class="gallery_item_meta">
                                <div class="gallery_item_meta_spacer" aria-hidden="true">
                                    <div class="gallery_header_inner">
                                        <div class="gallery_title_wrapper">
                                            <h2 class="gallery_title">Ipsum Fermentum Tristique</h2>
                                        </div>
                                    </div>
                                </div>
                                <p class="gallery_item_location">Heinz History Center</p>
                                <p class="gallery_item_caption">Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Gallery -->
 
{#
	{% include '@component-gallery' with {
		title: 'Title',
		theme: 'color',
		items: [
			{
				theme: 'theme',
				image: '1',
				alt: '',
				caption: 'caption'
			}
		]
	} %}
#}

<!-- Gallery -->
<div class="gallery theme_{{ theme }}">
	<div class="gallery_header">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="gallery_header_inner">
					<div class="gallery_title_wrapper">
						<h2 class="gallery_title">{{ title }}</h2>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="gallery_body">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="gallery_body_inner">
					<div class="gallery_items js-carousel" data-carousel-options='{"single": true, "autoHeight": true}'>
						{% for item in items %}
							<div class="gallery_item theme_{{ item.theme }}{% if item.portrait %} gallery_item_portrait{% endif %}">
								<figure class="gallery_item_figure">
									{% if item.portrait %}
										{% include '@partial-image' with {
											class: 'gallery_item',
											alt: '',
											image: item.image,
											loading: 'lazy',
											sources: [
												img.portraitClassic.lrg,
												img.portraitClassic.med,
												img.portraitClassic.sml,
												img.portraitClassic.xsml,
												img.portraitClassic.xxsml
											]
										} %}
									{% else %}
										{% include '@partial-image' with {
											class: 'gallery_item',
											alt: '',
											image: item.image,
											loading: 'lazy',
											sources: [
												img.classic.med,
												img.classic.sml,
												img.classic.xsml,
												img.classic.xxsml
											]
										} %}
									{% endif %}
								</figure>
								<div class="gallery_item_meta">
									<div class="gallery_item_meta_spacer" aria-hidden="true">
										<div class="gallery_header_inner">
											<div class="gallery_title_wrapper">
												<h2 class="gallery_title">{{ title }}</h2>
											</div>
										</div>
									</div>
									<p class="gallery_item_location">{{ item.location }}</p>
									{% if item.caption %}
										<p class="gallery_item_caption">{{ item.caption }}</p>
									{% endif %}
								</div>
							</div>
						{% endfor %}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Gallery -->

No notes defined.