<div class="c-exhibits-view">
<h2 id="js-filter-content-title" tabIndex="-1" class="u-sr-only">Exhibits Result List</h2>
<div id="js-filter-content" class="o-filter-content-container">
<div class="o-filter-content-container__loader">
<div class="o-filter-content-container__loader-icon"></div>
<span class="u-sr-only">Loading...</span>
</div>
<div id="js-replace-content" class="o-filter-content-container__inner">
<div class="c-exhibits-view__featured">
<div class="o-featured-card o-container">
<a href="#" class="o-featured-card__inner">
<div class="o-featured-card__content">
<div class="o-featured-card__content-inner">
<h2 class="o-featured-card__title f-title--h4">
<span class="u-hover-drawline">Permian Monsters</span>
</h2>
<p class="o-featured-card__label f-text--tag">Featured Exhibit</p>
<p class="o-featured-card__description f-text--small">What did the world look like before the dinosaurs? Step back 290 million years to when bizarre-looking creatures dominated life on land and sea, and dinosaurs had not yet evolved.</p>
<div class="o-featured-card__cta">
<span class="o-featured-card__cta-text o-btn o-btn--primary-inverse">Explore this Exhibit</span>
</div>
</div>
</div>
<div class="o-featured-card__image">
<img src="/images/homepage/beetle.jpg" alt="" />
</div>
</a>
</div>
</div>
<div class="o-container">
<h2 id="exhibits-view-title" class="u-sr-only">Exhibits</h2>
<ul class="c-exhibits-view__items o-row" aria-labelledby="exhibits-view-title">
<li class="c-exhibits-view__item o-col o-col-sm-6 js-watch u-watch--fade-up">
<a href="#" class="c-exhibits-view__item-link">
<div class="c-exhibits-view__item-content">
<h3 class="c-exhibits-view__item-title f-title--h5">Dinosaur Hall</h3>
<p class="c-exhibits-view__item-description f-text--small">Brief description of the exhibit goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultrices nisl quis leo tristique, eu interdum odio efficitur. Donec malesuada libero ut.</p>
<p class="c-exhibits-view__item-date f-text--cta f-spaced">Ongoing</p>
</div>
<div class="c-exhibits-view__item-image">
<img src="/images/homepage/social_03.jpg" alt="" />
</div>
</a>
</li>
<li class="c-exhibits-view__item o-col o-col-sm-6 js-watch u-watch--fade-up">
<a href="#" class="c-exhibits-view__item-link">
<div class="c-exhibits-view__item-content">
<h3 class="c-exhibits-view__item-title f-title--h5">Gideon Mendel: Drowning world</h3>
<p class="c-exhibits-view__item-description f-text--small">What did the world look like before the dinosaurs? Step back 290 million years to when bizarre-looking creatures dominated life on land and sea, and dinosaurs had not yet evolved.</p>
<p class="c-exhibits-view__item-date f-text--cta f-spaced">May 1 – October 17, 2021</p>
</div>
<div class="c-exhibits-view__item-image">
<img src="/images/homepage/social_03.jpg" alt="" />
</div>
</a>
</li>
<li class="c-exhibits-view__item o-col o-col-sm-6 js-watch u-watch--fade-up">
<a href="#" class="c-exhibits-view__item-link">
<div class="c-exhibits-view__item-content">
<h3 class="c-exhibits-view__item-title f-title--h5">Exhibit Name</h3>
<p class="c-exhibits-view__item-description f-text--small">Brief description of the exhibit goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultrices nisl quis leo tristique, eu interdum odio efficitur. Donec malesuada libero ut.</p>
<p class="c-exhibits-view__item-date f-text--cta f-spaced">Month DD – Month DD, Year</p>
</div>
<div class="c-exhibits-view__item-image">
<img src="/images/homepage/social_03.jpg" alt="" />
</div>
</a>
</li>
<li class="c-exhibits-view__item o-col o-col-sm-6 js-watch u-watch--fade-up">
<a href="#" class="c-exhibits-view__item-link">
<div class="c-exhibits-view__item-content">
<h3 class="c-exhibits-view__item-title f-title--h5">Exhibit Name</h3>
<p class="c-exhibits-view__item-description f-text--small">Brief description of the exhibit goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultrices nisl quis leo tristique, eu interdum odio efficitur. Donec malesuada libero ut.</p>
<p class="c-exhibits-view__item-date f-text--cta f-spaced">Month DD – Month DD, Year</p>
</div>
<div class="c-exhibits-view__item-image">
<img src="/images/homepage/social_03.jpg" alt="" />
</div>
</a>
</li>
<li class="c-exhibits-view__item o-col o-col-sm-6 js-watch u-watch--fade-up">
<a href="#" class="c-exhibits-view__item-link">
<div class="c-exhibits-view__item-content">
<h3 class="c-exhibits-view__item-title f-title--h5">Exhibit Name</h3>
<p class="c-exhibits-view__item-description f-text--small">Brief description of the exhibit goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultrices nisl quis leo tristique, eu interdum odio efficitur. Donec malesuada libero ut.</p>
<p class="c-exhibits-view__item-date f-text--cta f-spaced">Month DD – Month DD, Year</p>
</div>
<div class="c-exhibits-view__item-image">
<img src="/images/homepage/social_03.jpg" alt="" />
</div>
</a>
</li>
<li class="c-exhibits-view__item o-col o-col-sm-6 js-watch u-watch--fade-up">
<a href="#" class="c-exhibits-view__item-link">
<div class="c-exhibits-view__item-content">
<h3 class="c-exhibits-view__item-title f-title--h5">Exhibit Name</h3>
<p class="c-exhibits-view__item-description f-text--small">Brief description of the exhibit goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultrices nisl quis leo tristique, eu interdum odio efficitur. Donec malesuada libero ut.</p>
<p class="c-exhibits-view__item-date f-text--cta f-spaced">Month DD – Month DD, Year</p>
</div>
<div class="c-exhibits-view__item-image">
<img src="/images/homepage/social_03.jpg" alt="" />
</div>
</a>
</li>
<li class="c-exhibits-view__item o-col o-col-sm-6 js-watch u-watch--fade-up">
<a href="#" class="c-exhibits-view__item-link">
<div class="c-exhibits-view__item-content">
<h3 class="c-exhibits-view__item-title f-title--h5">Exhibit Name</h3>
<p class="c-exhibits-view__item-description f-text--small">Brief description of the exhibit goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultrices nisl quis leo tristique, eu interdum odio efficitur. Donec malesuada libero ut.</p>
<p class="c-exhibits-view__item-date f-text--cta f-spaced">Month DD – Month DD, Year</p>
</div>
<div class="c-exhibits-view__item-image">
<img src="/images/homepage/social_03.jpg" alt="" />
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="c-exhibits-view">
{% embed "04-objects/filters/filter-content-container" with filterContainerData %}
{% block filterContainerContent %}
{% if featured %}
<div class="c-exhibits-view__featured">
{% include "04-objects/featured-card" with featured only %}
</div>
{% endif %}
<div class="o-container">
<h2 id="exhibits-view-title" class="u-sr-only">Exhibits</h2>
<ul class="c-exhibits-view__items o-row" aria-labelledby="exhibits-view-title">
{% for item in items %}
<li class="c-exhibits-view__item o-col o-col-sm-6 js-watch u-watch--fade-up">
<a href="{{ item.link }}" class="c-exhibits-view__item-link">
<div class="c-exhibits-view__item-content">
<h3 class="c-exhibits-view__item-title f-title--h5">{{ item.title }}</h3>
<p class="c-exhibits-view__item-description f-text--small">{{ item.description }}</p>
<p class="c-exhibits-view__item-date f-text--cta f-spaced">{{ item.date }}</p>
</div>
<div class="c-exhibits-view__item-image">
{{ item.image|raw }}
</div>
</a>
</li>
{% endfor %}
</ul>
</div>
{% endblock %}
{% endembed %}
</div>
{
"pageColorTheme": "teal",
"filterContainerData": {
"title": "Exhibits Result List"
},
"featured": {
"label": "Featured Exhibit",
"title": "Permian Monsters",
"image": "<img src=\"/images/homepage/beetle.jpg\" alt=\"\" />",
"description": "What did the world look like before the dinosaurs? Step back 290 million years to when bizarre-looking creatures dominated life on land and sea, and dinosaurs had not yet evolved.",
"link": "#",
"ctaTitle": "Explore this Exhibit"
},
"items": [
{
"date": "Ongoing",
"title": "Dinosaur Hall",
"description": "Brief description of the exhibit goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultrices nisl quis leo tristique, eu interdum odio efficitur. Donec malesuada libero ut.",
"image": "<img src=\"/images/homepage/social_03.jpg\" alt=\"\" />",
"link": "#"
},
{
"date": "May 1 – October 17, 2021",
"title": "Gideon Mendel: Drowning world",
"description": "What did the world look like before the dinosaurs? Step back 290 million years to when bizarre-looking creatures dominated life on land and sea, and dinosaurs had not yet evolved.",
"image": "<img src=\"/images/homepage/social_03.jpg\" alt=\"\" />",
"link": "#"
},
{
"date": "Month DD – Month DD, Year",
"title": "Exhibit Name",
"description": "Brief description of the exhibit goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultrices nisl quis leo tristique, eu interdum odio efficitur. Donec malesuada libero ut.",
"image": "<img src=\"/images/homepage/social_03.jpg\" alt=\"\" />",
"link": "#"
},
{
"date": "Month DD – Month DD, Year",
"title": "Exhibit Name",
"description": "Brief description of the exhibit goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultrices nisl quis leo tristique, eu interdum odio efficitur. Donec malesuada libero ut.",
"image": "<img src=\"/images/homepage/social_03.jpg\" alt=\"\" />",
"link": "#"
},
{
"date": "Month DD – Month DD, Year",
"title": "Exhibit Name",
"description": "Brief description of the exhibit goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultrices nisl quis leo tristique, eu interdum odio efficitur. Donec malesuada libero ut.",
"image": "<img src=\"/images/homepage/social_03.jpg\" alt=\"\" />",
"link": "#"
},
{
"date": "Month DD – Month DD, Year",
"title": "Exhibit Name",
"description": "Brief description of the exhibit goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultrices nisl quis leo tristique, eu interdum odio efficitur. Donec malesuada libero ut.",
"image": "<img src=\"/images/homepage/social_03.jpg\" alt=\"\" />",
"link": "#"
},
{
"date": "Month DD – Month DD, Year",
"title": "Exhibit Name",
"description": "Brief description of the exhibit goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultrices nisl quis leo tristique, eu interdum odio efficitur. Donec malesuada libero ut.",
"image": "<img src=\"/images/homepage/social_03.jpg\" alt=\"\" />",
"link": "#"
}
]
}
.c-exhibits-view {
margin-top: 10rem;
margin-bottom: 10rem;
}
.c-exhibits-view__featured {
margin-bottom: 6.4rem;
}
.c-exhibits-view__item {
margin-bottom: 4.8rem;
}
.c-exhibits-view__item-link {
display: flex;
flex-direction: column-reverse;
}
.c-exhibits-view__item-content {
display: flex;
flex-direction: column;
}
.c-exhibits-view__item-title {
margin-bottom: 1.2rem;
}
.c-exhibits-view__item-date {
margin-top: 1.2rem;
}
.c-exhibits-view__item-image {
margin-bottom: 2.4rem;
}
No notes defined.