<!-- Museum Family -->
<div class="family theme_tan">
<div class="family_header">
<div class="fs-row">
<div class="fs-cell fs-lg-10 fs-lg-push-1">
<div class="family_header_inner">
<h2 class="family_title">Get to Know Our Family of Museums</h2>
<div class="family_description">
<p>Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
</div>
</div>
</div>
</div>
</div>
<div class="family_body">
<div class="fs-row">
<div class="fs-cell">
<div class="family_body_inner">
<ul class="family_list" aria-label="Get to Know Our Family of Museums">
<li class="family_item theme_history">
<a class="family_item_link" href="#">
<div class="family_item_link_inner">
<div class="family_item_media">
<figure class="family_item_figure" aria-hidden="true">
<img class="family_item_image" srcset="https://images.fastspot.com/generic/500x500/1 500w, https://images.fastspot.com/generic/300x300/1 300w, https://images.fastspot.com/generic/100x100/1 100w" src="https://images.fastspot.com/generic/100x100/1" alt="" loading="lazy" width="100" height="100">
</figure>
</div>
<div class="family_item_wrapper">
<h3 class="family_item_location">Heinz History Center</h3>
<p class="family_item_hours">Open 10:00 - 5:00</p>
</div>
</div>
</a>
</li>
<li class="family_item theme_sports">
<a class="family_item_link" href="#">
<div class="family_item_link_inner">
<div class="family_item_media">
<figure class="family_item_figure" aria-hidden="true">
<img class="family_item_image" srcset="https://images.fastspot.com/generic/500x500/2 500w, https://images.fastspot.com/generic/300x300/2 300w, https://images.fastspot.com/generic/100x100/2 100w" src="https://images.fastspot.com/generic/100x100/2" alt="" loading="lazy" width="100" height="100">
</figure>
</div>
<div class="family_item_wrapper">
<h3 class="family_item_location">Sports Museum</h3>
<p class="family_item_hours">Open 10:00 - 5:00</p>
</div>
</div>
</a>
</li>
<li class="family_item theme_fort">
<a class="family_item_link" href="#">
<div class="family_item_link_inner">
<div class="family_item_media">
<figure class="family_item_figure" aria-hidden="true">
<img class="family_item_image" srcset="https://images.fastspot.com/generic/500x500/3 500w, https://images.fastspot.com/generic/300x300/3 300w, https://images.fastspot.com/generic/100x100/3 100w" src="https://images.fastspot.com/generic/100x100/3" alt="" loading="lazy" width="100" height="100">
</figure>
</div>
<div class="family_item_wrapper">
<h3 class="family_item_location">Fort Pitt Museum</h3>
<p class="family_item_hours">Open 10:00 - 5:00</p>
</div>
</div>
</a>
</li>
<li class="family_item theme_meadowcroft">
<a class="family_item_link" href="#">
<div class="family_item_link_inner">
<div class="family_item_media">
<figure class="family_item_figure" aria-hidden="true">
<img class="family_item_image" srcset="https://images.fastspot.com/generic/500x500/4 500w, https://images.fastspot.com/generic/300x300/4 300w, https://images.fastspot.com/generic/100x100/4 100w" src="https://images.fastspot.com/generic/100x100/4" alt="" loading="lazy" width="100" height="100">
</figure>
</div>
<div class="family_item_wrapper">
<h3 class="family_item_location">Meadowcroft Rockshelter</h3>
<p class="family_item_hours">Returns May '22</p>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- END: Museum Family -->
{#
{% include '@component-museum-family' with {
theme: 'theme',
title: 'Title',
description: 'Description',
items: [
{
theme: 'Item Theme',
url: '#',
location: 'Item Location',
image: '1',
hours: 'Item Hours'
}
]
} %}
#}
<!-- Museum Family -->
<div class="family theme_{{ theme }}">
<div class="family_header">
<div class="fs-row">
<div class="fs-cell fs-lg-10 fs-lg-push-1">
<div class="family_header_inner">
<h2 class="family_title">{{ title }}</h2>
<div class="family_description">
<p>{{ description }}</p>
</div>
</div>
</div>
</div>
</div>
<div class="family_body">
<div class="fs-row">
<div class="fs-cell">
<div class="family_body_inner">
<ul class="family_list" aria-label="{{ title }}">
{% for item in items %}
<li class="family_item theme_{{ item.theme }}">
<a class="family_item_link" href="{{ item.url }}">
<div class="family_item_link_inner">
<div class="family_item_media">
<figure class="family_item_figure" aria-hidden="true">
{% include '@partial-image' with {
class: 'family_item',
alt: '',
image: item.image,
loading: 'lazy',
sources: [
img.square.xsml,
img.square.xxsml,
img.square.thumb
]
} %}
</figure>
</div>
<div class="family_item_wrapper">
<h3 class="family_item_location">{{ item.location }}</h3>
<p class="family_item_hours">{{ item.hours }}</p>
</div>
</div>
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- END: Museum Family -->
No notes defined.