<div class="slab slab--bright-blue-horizontal-offset">
<div class="slab__wrapper experience-grid ">
<div class="experience-grid__intro">
<div class="experience-grid__intro-content">
<h2 class="headline-group ">
<span class="headline-group__head">Experience Davidson Community</span>
</h2>
<p class="">
<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers.
</p>
<button class="button button button--utility"><span class="icon "><span class="icon__glyph ic ic--shuffle" aria-hidden="true"></span><span class="icon__label">Shuffle Stories</span></span></button> </div>
</div>
<div class="teaser teaser--experience teaser--experience-overlay-blue">
<a href="" class="block-link">
<div class="teaser__image">
<img src="https://magicyeti.us/800/600/davidson" alt="Placeholder image. This should be real alt text when implemented." class="" /> </div>
<div class="teaser__content">
<div class="content-meta">
<span class="taxonomy">Tag or Category</span>
</div>
<h3 class="headline-group ">
<span class="headline-group__head">Title of an Experience Teaser 1</span>
</h3>
<p class="">
<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers.
</p>
</div>
</a>
</div>
<div class="teaser teaser--experience teaser--experience-overlay">
<a href="" class="block-link">
<div class="teaser__image">
<img src="https://magicyeti.us/800/600/davidson" alt="Placeholder image. This should be real alt text when implemented." class="" /> </div>
<div class="teaser__content">
<div class="content-meta">
<span class="taxonomy">Tag or Category</span>
</div>
<h3 class="headline-group ">
<span class="headline-group__head">This is an Experience Teaser that has a Somewhat Long Headline</span>
</h3>
</div>
</a>
</div>
<div class="teaser teaser--experience teaser--experience-gray">
<a href="" class="block-link">
<div class="teaser__image">
<img src="https://magicyeti.us/800/600/davidson" alt="Placeholder image. This should be real alt text when implemented." class="" /> </div>
<div class="teaser__content">
<div class="content-meta">
<span class="taxonomy">Tag or Category</span>
</div>
<h3 class="headline-group ">
<span class="headline-group__head">Non-overlay Experience Teaser with Image</span>
</h3>
</div>
</a>
</div>
<div class="teaser teaser--experience">
<a href="" class="block-link">
<div class="teaser__content">
<div class="content-meta">
<span class="taxonomy">Tag or Category</span>
</div>
<h3 class="headline-group ">
<span class="headline-group__head">Experience Teaser with Long Description</span>
</h3>
<p class="">
<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers.
</p>
</div>
</a>
</div>
<div class="teaser teaser--experience teaser--experience-overlay-red">
<a href="" class="block-link">
<div class="teaser__image">
<img src="https://magicyeti.us/800/600/davidson" alt="Placeholder image. This should be real alt text when implemented." class="" /> </div>
<div class="teaser__content">
<div class="content-meta">
<span class="taxonomy">Tag or Category</span>
</div>
<h3 class="headline-group ">
<span class="headline-group__head">Small Experience Teaser</span>
</h3>
</div>
</a>
</div>
<div class="teaser teaser--experience teaser--experience-overlay-blue">
<a href="" class="block-link">
<div class="teaser__image">
<img src="https://magicyeti.us/800/600/davidson" alt="Placeholder image. This should be real alt text when implemented." class="" /> </div>
<div class="teaser__content">
<div class="content-meta">
<span class="taxonomy">Tag or Category</span>
</div>
<h3 class="headline-group ">
<span class="headline-group__head">Another small Experience Teaser</span>
</h3>
</div>
</a>
</div>
<div class="panelset" tabindex="-1" data-panel="panel-0">
<div class="teaser teaser--experience teaser--experience-overlay-blue">
<a href="" class="block-link">
<div class="teaser__image">
<img src="https://magicyeti.us/800/600/davidson" alt="Placeholder image. This should be real alt text when implemented." class="" /> </div>
<div class="teaser__content">
<div class="content-meta">
<span class="taxonomy">Tag or Category</span>
</div>
<h3 class="headline-group ">
<span class="headline-group__head">Title of an Experience Teaser 1</span>
</h3>
<p class="">
<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers.
</p>
</div>
</a>
</div>
<div class="teaser teaser--experience teaser--experience-overlay">
<a href="" class="block-link">
<div class="teaser__image">
<img src="https://magicyeti.us/800/600/davidson" alt="Placeholder image. This should be real alt text when implemented." class="" /> </div>
<div class="teaser__content">
<div class="content-meta">
<span class="taxonomy">Tag or Category</span>
</div>
<h3 class="headline-group ">
<span class="headline-group__head">This is an Experience Teaser that has a Somewhat Long Headline</span>
</h3>
</div>
</a>
</div>
<div class="teaser teaser--experience teaser--experience-gray">
<a href="" class="block-link">
<div class="teaser__image">
<img src="https://magicyeti.us/800/600/davidson" alt="Placeholder image. This should be real alt text when implemented." class="" /> </div>
<div class="teaser__content">
<div class="content-meta">
<span class="taxonomy">Tag or Category</span>
</div>
<h3 class="headline-group ">
<span class="headline-group__head">Non-overlay Experience Teaser with Image</span>
</h3>
</div>
</a>
</div>
<div class="teaser teaser--experience">
<a href="" class="block-link">
<div class="teaser__content">
<div class="content-meta">
<span class="taxonomy">Tag or Category</span>
</div>
<h3 class="headline-group ">
<span class="headline-group__head">Experience Teaser with Long Description</span>
</h3>
<p class="">
<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers.
</p>
</div>
</a>
</div>
<div class="teaser teaser--experience teaser--experience-overlay-red">
<a href="" class="block-link">
<div class="teaser__image">
<img src="https://magicyeti.us/800/600/davidson" alt="Placeholder image. This should be real alt text when implemented." class="" /> </div>
<div class="teaser__content">
<div class="content-meta">
<span class="taxonomy">Tag or Category</span>
</div>
<h3 class="headline-group ">
<span class="headline-group__head">Small Experience Teaser</span>
</h3>
</div>
</a>
</div>
<div class="teaser teaser--experience teaser--experience-overlay-blue">
<a href="" class="block-link">
<div class="teaser__image">
<img src="https://magicyeti.us/800/600/davidson" alt="Placeholder image. This should be real alt text when implemented." class="" /> </div>
<div class="teaser__content">
<div class="content-meta">
<span class="taxonomy">Tag or Category</span>
</div>
<h3 class="headline-group ">
<span class="headline-group__head">Another small Experience Teaser</span>
</h3>
</div>
</a>
</div>
</div>
<div class="panelset" tabindex="-1" data-panel="panel-1">
<div class="teaser teaser--experience teaser--experience-overlay-blue">
<a href="" class="block-link">
<div class="teaser__image">
<img src="https://magicyeti.us/800/600/davidson" alt="Placeholder image. This should be real alt text when implemented." class="" /> </div>
<div class="teaser__content">
<div class="content-meta">
<span class="taxonomy">Tag or Category</span>
</div>
<h3 class="headline-group ">
<span class="headline-group__head">Title of an Experience Teaser 2</span>
</h3>
<p class="">
<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers.
</p>
</div>
</a>
</div>
<div class="teaser teaser--experience teaser--experience-overlay">
<a href="" class="block-link">
<div class="teaser__image">
<img src="https://magicyeti.us/800/600/davidson" alt="Placeholder image. This should be real alt text when implemented." class="" /> </div>
<div class="teaser__content">
<div class="content-meta">
<span class="taxonomy">Tag or Category</span>
</div>
<h3 class="headline-group ">
<span class="headline-group__head">This is an Experience Teaser that has a Somewhat Long Headline</span>
</h3>
</div>
</a>
</div>
<div class="teaser teaser--experience teaser--experience-gray">
<a href="" class="block-link">
<div class="teaser__image">
<img src="https://magicyeti.us/800/600/davidson" alt="Placeholder image. This should be real alt text when implemented." class="" /> </div>
<div class="teaser__content">
<div class="content-meta">
<span class="taxonomy">Tag or Category</span>
</div>
<h3 class="headline-group ">
<span class="headline-group__head">Non-overlay Experience Teaser with Image</span>
</h3>
</div>
</a>
</div>
<div class="teaser teaser--experience">
<a href="" class="block-link">
<div class="teaser__content">
<div class="content-meta">
<span class="taxonomy">Tag or Category</span>
</div>
<h3 class="headline-group ">
<span class="headline-group__head">Experience Teaser with Long Description</span>
</h3>
<p class="">
<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers.
</p>
</div>
</a>
</div>
<div class="teaser teaser--experience teaser--experience-overlay-red">
<a href="" class="block-link">
<div class="teaser__image">
<img src="https://magicyeti.us/800/600/davidson" alt="Placeholder image. This should be real alt text when implemented." class="" /> </div>
<div class="teaser__content">
<div class="content-meta">
<span class="taxonomy">Tag or Category</span>
</div>
<h3 class="headline-group ">
<span class="headline-group__head">Small Experience Teaser</span>
</h3>
</div>
</a>
</div>
<div class="teaser teaser--experience teaser--experience-overlay-blue">
<a href="" class="block-link">
<div class="teaser__image">
<img src="https://magicyeti.us/800/600/davidson" alt="Placeholder image. This should be real alt text when implemented." class="" /> </div>
<div class="teaser__content">
<div class="content-meta">
<span class="taxonomy">Tag or Category</span>
</div>
<h3 class="headline-group ">
<span class="headline-group__head">Another small Experience Teaser</span>
</h3>
</div>
</a>
</div>
</div>
<div class="panelset" tabindex="-1" data-panel="panel-2">
<div class="teaser teaser--experience teaser--experience-overlay-blue">
<a href="" class="block-link">
<div class="teaser__image">
<img src="https://magicyeti.us/800/600/davidson" alt="Placeholder image. This should be real alt text when implemented." class="" /> </div>
<div class="teaser__content">
<div class="content-meta">
<span class="taxonomy">Tag or Category</span>
</div>
<h3 class="headline-group ">
<span class="headline-group__head">Title of an Experience Teaser 3</span>
</h3>
<p class="">
<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers.
</p>
</div>
</a>
</div>
<div class="teaser teaser--experience teaser--experience-overlay">
<a href="" class="block-link">
<div class="teaser__image">
<img src="https://magicyeti.us/800/600/davidson" alt="Placeholder image. This should be real alt text when implemented." class="" /> </div>
<div class="teaser__content">
<div class="content-meta">
<span class="taxonomy">Tag or Category</span>
</div>
<h3 class="headline-group ">
<span class="headline-group__head">This is an Experience Teaser that has a Somewhat Long Headline</span>
</h3>
</div>
</a>
</div>
<div class="teaser teaser--experience teaser--experience-gray">
<a href="" class="block-link">
<div class="teaser__image">
<img src="https://magicyeti.us/800/600/davidson" alt="Placeholder image. This should be real alt text when implemented." class="" /> </div>
<div class="teaser__content">
<div class="content-meta">
<span class="taxonomy">Tag or Category</span>
</div>
<h3 class="headline-group ">
<span class="headline-group__head">Non-overlay Experience Teaser with Image</span>
</h3>
</div>
</a>
</div>
<div class="teaser teaser--experience">
<a href="" class="block-link">
<div class="teaser__content">
<div class="content-meta">
<span class="taxonomy">Tag or Category</span>
</div>
<h3 class="headline-group ">
<span class="headline-group__head">Experience Teaser with Long Description</span>
</h3>
<p class="">
<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers.
</p>
</div>
</a>
</div>
<div class="teaser teaser--experience teaser--experience-overlay-red">
<a href="" class="block-link">
<div class="teaser__image">
<img src="https://magicyeti.us/800/600/davidson" alt="Placeholder image. This should be real alt text when implemented." class="" /> </div>
<div class="teaser__content">
<div class="content-meta">
<span class="taxonomy">Tag or Category</span>
</div>
<h3 class="headline-group ">
<span class="headline-group__head">Small Experience Teaser</span>
</h3>
</div>
</a>
</div>
<div class="teaser teaser--experience teaser--experience-overlay-blue">
<a href="" class="block-link">
<div class="teaser__image">
<img src="https://magicyeti.us/800/600/davidson" alt="Placeholder image. This should be real alt text when implemented." class="" /> </div>
<div class="teaser__content">
<div class="content-meta">
<span class="taxonomy">Tag or Category</span>
</div>
<h3 class="headline-group ">
<span class="headline-group__head">Another small Experience Teaser</span>
</h3>
</div>
</a>
</div>
</div>
<div class="panelset" tabindex="-1" data-panel="panel-3">
<div class="teaser teaser--experience teaser--experience-overlay-blue">
<a href="" class="block-link">
<div class="teaser__image">
<img src="https://magicyeti.us/800/600/davidson" alt="Placeholder image. This should be real alt text when implemented." class="" /> </div>
<div class="teaser__content">
<div class="content-meta">
<span class="taxonomy">Tag or Category</span>
</div>
<h3 class="headline-group ">
<span class="headline-group__head">Title of an Experience Teaser 4</span>
</h3>
<p class="">
<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers.
</p>
</div>
</a>
</div>
<div class="teaser teaser--experience teaser--experience-overlay">
<a href="" class="block-link">
<div class="teaser__image">
<img src="https://magicyeti.us/800/600/davidson" alt="Placeholder image. This should be real alt text when implemented." class="" /> </div>
<div class="teaser__content">
<div class="content-meta">
<span class="taxonomy">Tag or Category</span>
</div>
<h3 class="headline-group ">
<span class="headline-group__head">This is an Experience Teaser that has a Somewhat Long Headline</span>
</h3>
</div>
</a>
</div>
<div class="teaser teaser--experience teaser--experience-gray">
<a href="" class="block-link">
<div class="teaser__image">
<img src="https://magicyeti.us/800/600/davidson" alt="Placeholder image. This should be real alt text when implemented." class="" /> </div>
<div class="teaser__content">
<div class="content-meta">
<span class="taxonomy">Tag or Category</span>
</div>
<h3 class="headline-group ">
<span class="headline-group__head">Non-overlay Experience Teaser with Image</span>
</h3>
</div>
</a>
</div>
<div class="teaser teaser--experience">
<a href="" class="block-link">
<div class="teaser__content">
<div class="content-meta">
<span class="taxonomy">Tag or Category</span>
</div>
<h3 class="headline-group ">
<span class="headline-group__head">Experience Teaser with Long Description</span>
</h3>
<p class="">
<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers.
</p>
</div>
</a>
</div>
<div class="teaser teaser--experience teaser--experience-overlay-red">
<a href="" class="block-link">
<div class="teaser__image">
<img src="https://magicyeti.us/800/600/davidson" alt="Placeholder image. This should be real alt text when implemented." class="" /> </div>
<div class="teaser__content">
<div class="content-meta">
<span class="taxonomy">Tag or Category</span>
</div>
<h3 class="headline-group ">
<span class="headline-group__head">Small Experience Teaser</span>
</h3>
</div>
</a>
</div>
<div class="teaser teaser--experience teaser--experience-overlay-blue">
<a href="" class="block-link">
<div class="teaser__image">
<img src="https://magicyeti.us/800/600/davidson" alt="Placeholder image. This should be real alt text when implemented." class="" /> </div>
<div class="teaser__content">
<div class="content-meta">
<span class="taxonomy">Tag or Category</span>
</div>
<h3 class="headline-group ">
<span class="headline-group__head">Another small Experience Teaser</span>
</h3>
</div>
</a>
</div>
</div>
<div class="panelset" tabindex="-1" data-panel="panel-4">
<div class="teaser teaser--experience teaser--experience-overlay-blue">
<a href="" class="block-link">
<div class="teaser__image">
<img src="https://magicyeti.us/800/600/davidson" alt="Placeholder image. This should be real alt text when implemented." class="" /> </div>
<div class="teaser__content">
<div class="content-meta">
<span class="taxonomy">Tag or Category</span>
</div>
<h3 class="headline-group ">
<span class="headline-group__head">Title of an Experience Teaser 5</span>
</h3>
<p class="">
<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers.
</p>
</div>
</a>
</div>
<div class="teaser teaser--experience teaser--experience-overlay">
<a href="" class="block-link">
<div class="teaser__image">
<img src="https://magicyeti.us/800/600/davidson" alt="Placeholder image. This should be real alt text when implemented." class="" /> </div>
<div class="teaser__content">
<div class="content-meta">
<span class="taxonomy">Tag or Category</span>
</div>
<h3 class="headline-group ">
<span class="headline-group__head">This is an Experience Teaser that has a Somewhat Long Headline</span>
</h3>
</div>
</a>
</div>
<div class="teaser teaser--experience teaser--experience-gray">
<a href="" class="block-link">
<div class="teaser__image">
<img src="https://magicyeti.us/800/600/davidson" alt="Placeholder image. This should be real alt text when implemented." class="" /> </div>
<div class="teaser__content">
<div class="content-meta">
<span class="taxonomy">Tag or Category</span>
</div>
<h3 class="headline-group ">
<span class="headline-group__head">Non-overlay Experience Teaser with Image</span>
</h3>
</div>
</a>
</div>
<div class="teaser teaser--experience">
<a href="" class="block-link">
<div class="teaser__content">
<div class="content-meta">
<span class="taxonomy">Tag or Category</span>
</div>
<h3 class="headline-group ">
<span class="headline-group__head">Experience Teaser with Long Description</span>
</h3>
<p class="">
<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers.
</p>
</div>
</a>
</div>
<div class="teaser teaser--experience teaser--experience-overlay-red">
<a href="" class="block-link">
<div class="teaser__image">
<img src="https://magicyeti.us/800/600/davidson" alt="Placeholder image. This should be real alt text when implemented." class="" /> </div>
<div class="teaser__content">
<div class="content-meta">
<span class="taxonomy">Tag or Category</span>
</div>
<h3 class="headline-group ">
<span class="headline-group__head">Small Experience Teaser</span>
</h3>
</div>
</a>
</div>
<div class="teaser teaser--experience teaser--experience-overlay-blue">
<a href="" class="block-link">
<div class="teaser__image">
<img src="https://magicyeti.us/800/600/davidson" alt="Placeholder image. This should be real alt text when implemented." class="" /> </div>
<div class="teaser__content">
<div class="content-meta">
<span class="taxonomy">Tag or Category</span>
</div>
<h3 class="headline-group ">
<span class="headline-group__head">Another small Experience Teaser</span>
</h3>
</div>
</a>
</div>
</div>
</div>
</div>
{% if experience_grid is not empty %}
{#
ideally we'd embed the slab here instead,
but the slab pattern doesn't support putting classes on slab__wrapper (yet)
#}
<div class="slab slab--bright-blue-horizontal-offset">
<div class="slab__wrapper experience-grid {{ experience_grid.variant }}">
<div class="experience-grid__intro">
<div class="experience-grid__intro-content">
{% include '@headline-group' with { hg: experience_grid.hg } %}
{% include '@p' with { p: experience_grid.p } %}
{% include '@icon-button' with { button: experience_grid.button } %}
</div>
</div>
{% block experience_grid_items %}
{% for item in experience_grid.items[0] %}
{% include '@teaser' with { teaser: item } %}
{% endfor %}
{% for panel in experience_grid.items %}
<div class="panelset" tabindex="-1" data-panel="panel-{{ loop.index0 }}">
{% for item in panel %}
{% include '@teaser' with { teaser: item } %}
{% endfor %}
</div>
{% endfor %}
{% endblock %}
</div>
</div>
{% endif %}
{
"experience_grid": {
"hg": {
"headline": "Experience Davidson Community",
"tag": "h2"
},
"p": {
"content": "<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers."
},
"button": {
"url": "http://www.example.com/",
"title": "Shuffle Stories",
"variant": "button button--utility",
"icon": {
"glyph": "ic--shuffle",
"label": "Shuffle Stories"
}
},
"items": [
[
{
"teaser": null,
"variant": "teaser--experience teaser--experience-overlay-blue",
"hg": {
"headline": "Title of an Experience Teaser 1",
"tag": "h3"
},
"content_meta": {
"taxonomy": {
"tag": "Tag or Category"
},
"datetime": null
},
"image": {
"ratio": "4:3",
"width": 800,
"alt": "Placeholder image. This should be real alt text when implemented.",
"tag": "davidson"
},
"p": {
"content": "<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers."
}
},
{
"teaser": null,
"variant": "teaser--experience teaser--experience-overlay",
"hg": {
"headline": "This is an Experience Teaser that has a Somewhat Long Headline",
"tag": "h3"
},
"content_meta": {
"taxonomy": {
"tag": "Tag or Category"
},
"datetime": null
},
"image": {
"ratio": "4:3",
"width": 800,
"alt": "Placeholder image. This should be real alt text when implemented.",
"tag": "davidson"
}
},
{
"teaser": null,
"variant": "teaser--experience teaser--experience-gray",
"image": {
"ratio": "4:3",
"width": 800,
"alt": "Placeholder image. This should be real alt text when implemented.",
"tag": "davidson"
},
"hg": {
"headline": "Non-overlay Experience Teaser with Image",
"tag": "h3"
},
"content_meta": {
"taxonomy": {
"tag": "Tag or Category"
},
"datetime": null
}
},
{
"teaser": null,
"variant": "teaser--experience",
"hg": {
"headline": "Experience Teaser with Long Description",
"tag": "h3"
},
"content_meta": {
"taxonomy": {
"tag": "Tag or Category"
},
"datetime": null
},
"p": {
"content": "<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers."
}
},
{
"teaser": null,
"variant": "teaser--experience teaser--experience-overlay-red",
"image": {
"ratio": "4:3",
"width": 800,
"alt": "Placeholder image. This should be real alt text when implemented.",
"tag": "davidson"
},
"hg": {
"headline": "Small Experience Teaser",
"tag": "h3"
},
"content_meta": {
"taxonomy": {
"tag": "Tag or Category"
},
"datetime": null
}
},
{
"teaser": null,
"variant": "teaser--experience teaser--experience-overlay-blue",
"image": {
"ratio": "4:3",
"width": 800,
"alt": "Placeholder image. This should be real alt text when implemented.",
"tag": "davidson"
},
"hg": {
"headline": "Another small Experience Teaser",
"tag": "h3"
},
"content_meta": {
"taxonomy": {
"tag": "Tag or Category"
},
"datetime": null
}
}
],
[
{
"teaser": null,
"variant": "teaser--experience teaser--experience-overlay-blue",
"hg": {
"headline": "Title of an Experience Teaser 2",
"tag": "h3"
},
"content_meta": {
"taxonomy": {
"tag": "Tag or Category"
},
"datetime": null
},
"image": {
"ratio": "4:3",
"width": 800,
"alt": "Placeholder image. This should be real alt text when implemented.",
"tag": "davidson"
},
"p": {
"content": "<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers."
}
},
{
"teaser": null,
"variant": "teaser--experience teaser--experience-overlay",
"hg": {
"headline": "This is an Experience Teaser that has a Somewhat Long Headline",
"tag": "h3"
},
"content_meta": {
"taxonomy": {
"tag": "Tag or Category"
},
"datetime": null
},
"image": {
"ratio": "4:3",
"width": 800,
"alt": "Placeholder image. This should be real alt text when implemented.",
"tag": "davidson"
}
},
{
"teaser": null,
"variant": "teaser--experience teaser--experience-gray",
"image": {
"ratio": "4:3",
"width": 800,
"alt": "Placeholder image. This should be real alt text when implemented.",
"tag": "davidson"
},
"hg": {
"headline": "Non-overlay Experience Teaser with Image",
"tag": "h3"
},
"content_meta": {
"taxonomy": {
"tag": "Tag or Category"
},
"datetime": null
}
},
{
"teaser": null,
"variant": "teaser--experience",
"hg": {
"headline": "Experience Teaser with Long Description",
"tag": "h3"
},
"content_meta": {
"taxonomy": {
"tag": "Tag or Category"
},
"datetime": null
},
"p": {
"content": "<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers."
}
},
{
"teaser": null,
"variant": "teaser--experience teaser--experience-overlay-red",
"image": {
"ratio": "4:3",
"width": 800,
"alt": "Placeholder image. This should be real alt text when implemented.",
"tag": "davidson"
},
"hg": {
"headline": "Small Experience Teaser",
"tag": "h3"
},
"content_meta": {
"taxonomy": {
"tag": "Tag or Category"
},
"datetime": null
}
},
{
"teaser": null,
"variant": "teaser--experience teaser--experience-overlay-blue",
"image": {
"ratio": "4:3",
"width": 800,
"alt": "Placeholder image. This should be real alt text when implemented.",
"tag": "davidson"
},
"hg": {
"headline": "Another small Experience Teaser",
"tag": "h3"
},
"content_meta": {
"taxonomy": {
"tag": "Tag or Category"
},
"datetime": null
}
}
],
[
{
"teaser": null,
"variant": "teaser--experience teaser--experience-overlay-blue",
"hg": {
"headline": "Title of an Experience Teaser 3",
"tag": "h3"
},
"content_meta": {
"taxonomy": {
"tag": "Tag or Category"
},
"datetime": null
},
"image": {
"ratio": "4:3",
"width": 800,
"alt": "Placeholder image. This should be real alt text when implemented.",
"tag": "davidson"
},
"p": {
"content": "<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers."
}
},
{
"teaser": null,
"variant": "teaser--experience teaser--experience-overlay",
"hg": {
"headline": "This is an Experience Teaser that has a Somewhat Long Headline",
"tag": "h3"
},
"content_meta": {
"taxonomy": {
"tag": "Tag or Category"
},
"datetime": null
},
"image": {
"ratio": "4:3",
"width": 800,
"alt": "Placeholder image. This should be real alt text when implemented.",
"tag": "davidson"
}
},
{
"teaser": null,
"variant": "teaser--experience teaser--experience-gray",
"image": {
"ratio": "4:3",
"width": 800,
"alt": "Placeholder image. This should be real alt text when implemented.",
"tag": "davidson"
},
"hg": {
"headline": "Non-overlay Experience Teaser with Image",
"tag": "h3"
},
"content_meta": {
"taxonomy": {
"tag": "Tag or Category"
},
"datetime": null
}
},
{
"teaser": null,
"variant": "teaser--experience",
"hg": {
"headline": "Experience Teaser with Long Description",
"tag": "h3"
},
"content_meta": {
"taxonomy": {
"tag": "Tag or Category"
},
"datetime": null
},
"p": {
"content": "<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers."
}
},
{
"teaser": null,
"variant": "teaser--experience teaser--experience-overlay-red",
"image": {
"ratio": "4:3",
"width": 800,
"alt": "Placeholder image. This should be real alt text when implemented.",
"tag": "davidson"
},
"hg": {
"headline": "Small Experience Teaser",
"tag": "h3"
},
"content_meta": {
"taxonomy": {
"tag": "Tag or Category"
},
"datetime": null
}
},
{
"teaser": null,
"variant": "teaser--experience teaser--experience-overlay-blue",
"image": {
"ratio": "4:3",
"width": 800,
"alt": "Placeholder image. This should be real alt text when implemented.",
"tag": "davidson"
},
"hg": {
"headline": "Another small Experience Teaser",
"tag": "h3"
},
"content_meta": {
"taxonomy": {
"tag": "Tag or Category"
},
"datetime": null
}
}
],
[
{
"teaser": null,
"variant": "teaser--experience teaser--experience-overlay-blue",
"hg": {
"headline": "Title of an Experience Teaser 4",
"tag": "h3"
},
"content_meta": {
"taxonomy": {
"tag": "Tag or Category"
},
"datetime": null
},
"image": {
"ratio": "4:3",
"width": 800,
"alt": "Placeholder image. This should be real alt text when implemented.",
"tag": "davidson"
},
"p": {
"content": "<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers."
}
},
{
"teaser": null,
"variant": "teaser--experience teaser--experience-overlay",
"hg": {
"headline": "This is an Experience Teaser that has a Somewhat Long Headline",
"tag": "h3"
},
"content_meta": {
"taxonomy": {
"tag": "Tag or Category"
},
"datetime": null
},
"image": {
"ratio": "4:3",
"width": 800,
"alt": "Placeholder image. This should be real alt text when implemented.",
"tag": "davidson"
}
},
{
"teaser": null,
"variant": "teaser--experience teaser--experience-gray",
"image": {
"ratio": "4:3",
"width": 800,
"alt": "Placeholder image. This should be real alt text when implemented.",
"tag": "davidson"
},
"hg": {
"headline": "Non-overlay Experience Teaser with Image",
"tag": "h3"
},
"content_meta": {
"taxonomy": {
"tag": "Tag or Category"
},
"datetime": null
}
},
{
"teaser": null,
"variant": "teaser--experience",
"hg": {
"headline": "Experience Teaser with Long Description",
"tag": "h3"
},
"content_meta": {
"taxonomy": {
"tag": "Tag or Category"
},
"datetime": null
},
"p": {
"content": "<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers."
}
},
{
"teaser": null,
"variant": "teaser--experience teaser--experience-overlay-red",
"image": {
"ratio": "4:3",
"width": 800,
"alt": "Placeholder image. This should be real alt text when implemented.",
"tag": "davidson"
},
"hg": {
"headline": "Small Experience Teaser",
"tag": "h3"
},
"content_meta": {
"taxonomy": {
"tag": "Tag or Category"
},
"datetime": null
}
},
{
"teaser": null,
"variant": "teaser--experience teaser--experience-overlay-blue",
"image": {
"ratio": "4:3",
"width": 800,
"alt": "Placeholder image. This should be real alt text when implemented.",
"tag": "davidson"
},
"hg": {
"headline": "Another small Experience Teaser",
"tag": "h3"
},
"content_meta": {
"taxonomy": {
"tag": "Tag or Category"
},
"datetime": null
}
}
],
[
{
"teaser": null,
"variant": "teaser--experience teaser--experience-overlay-blue",
"hg": {
"headline": "Title of an Experience Teaser 5",
"tag": "h3"
},
"content_meta": {
"taxonomy": {
"tag": "Tag or Category"
},
"datetime": null
},
"image": {
"ratio": "4:3",
"width": 800,
"alt": "Placeholder image. This should be real alt text when implemented.",
"tag": "davidson"
},
"p": {
"content": "<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers."
}
},
{
"teaser": null,
"variant": "teaser--experience teaser--experience-overlay",
"hg": {
"headline": "This is an Experience Teaser that has a Somewhat Long Headline",
"tag": "h3"
},
"content_meta": {
"taxonomy": {
"tag": "Tag or Category"
},
"datetime": null
},
"image": {
"ratio": "4:3",
"width": 800,
"alt": "Placeholder image. This should be real alt text when implemented.",
"tag": "davidson"
}
},
{
"teaser": null,
"variant": "teaser--experience teaser--experience-gray",
"image": {
"ratio": "4:3",
"width": 800,
"alt": "Placeholder image. This should be real alt text when implemented.",
"tag": "davidson"
},
"hg": {
"headline": "Non-overlay Experience Teaser with Image",
"tag": "h3"
},
"content_meta": {
"taxonomy": {
"tag": "Tag or Category"
},
"datetime": null
}
},
{
"teaser": null,
"variant": "teaser--experience",
"hg": {
"headline": "Experience Teaser with Long Description",
"tag": "h3"
},
"content_meta": {
"taxonomy": {
"tag": "Tag or Category"
},
"datetime": null
},
"p": {
"content": "<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers."
}
},
{
"teaser": null,
"variant": "teaser--experience teaser--experience-overlay-red",
"image": {
"ratio": "4:3",
"width": 800,
"alt": "Placeholder image. This should be real alt text when implemented.",
"tag": "davidson"
},
"hg": {
"headline": "Small Experience Teaser",
"tag": "h3"
},
"content_meta": {
"taxonomy": {
"tag": "Tag or Category"
},
"datetime": null
}
},
{
"teaser": null,
"variant": "teaser--experience teaser--experience-overlay-blue",
"image": {
"ratio": "4:3",
"width": 800,
"alt": "Placeholder image. This should be real alt text when implemented.",
"tag": "davidson"
},
"hg": {
"headline": "Another small Experience Teaser",
"tag": "h3"
},
"content_meta": {
"taxonomy": {
"tag": "Tag or Category"
},
"datetime": null
}
}
]
]
}
}
$experience-col1-width: 40%;
$experience-col2-width: 60%;
.experience-grid {
display: flex;
flex-flow: row wrap;
margin-bottom: rr-gridbase(6);
@include rr-break-directive(l) {
align-items: flex-start;
}
.teaser {
transition: opacity .3s ease-in-out;
}
.panelset {
left: -999999em;
position: absolute;
.teaser {
opacity: .1;
}
}
.teaser,
.experience-grid__intro {
flex: 0 1 100%;
@include rr-break-directive(m) {
flex: 0 1 50%;
}
}
// the first grid block is the intro/title block and not part of the teaser object
.experience-grid__intro {
@include faux-touch-edge($touch-color: color(gray-lightest));
@include rr-break-directive(l) {
flex: 0 1 $experience-col1-width;
&:before {
right: rem(-32px);
}
}
.experience-grid__intro-content {
padding: rr-gridbase(4);
@include rr-break-directive(l) {
padding: rr-gridbase(6) rr-gridbase(3) rr-gridbase(18) 0;
}
}
.headline-group {
.headline-group__head {
@include slab-headline;
}
}
}
// big blue overlay top right
// (technically any teaser can go here but doing this for reference)
.teaser:nth-child(2) {
transition-delay: .1s;
@include rr-break-directive(l) {
z-index: 3;
flex: 0 1 $experience-col2-width;
margin-top: rem(55px);
.headline-group {
.headline-group__head {
@include rr-font-compute(3xl, medium);
}
}
.teaser__content {
max-width: 55%;
}
}
}
// black overlay left middle
.teaser:nth-child(3) {
transition-delay: .2s;
@include rr-break-directive(l) {
flex: 0 1 $experience-col1-width;
z-index: 4;
margin-top: -34%;
.teaser__content {
@include experience-overlay-align-bottom;
padding-bottom: rem(40px);
}
}
}
.teaser:nth-child(4) {
transition-delay: .3s;
}
.teaser:nth-child(5) {
transition-delay: .5s;
}
.teaser:nth-child(6) {
transition-delay: 0s;
}
@include rr-break-directive(l) {
// non-overlay teasers bottom right row
.teaser:nth-child(4),
.teaser:nth-child(5) {
flex: 0 1 ($experience-col2-width/2)-3%;
align-self: stretch;
margin-top: rem(-55px);
max-height: rem(400px);
overflow: hidden;
position: relative;
& > * {
position: relative;
z-index: 1;
}
&:after {
display: block;
content: '';
position: absolute;
left: 0;
right: 0;
top: auto;
bottom: 0;
height: rr-gridbase(3); // match padding around teaser__content
background-image: linear-gradient(rgba(color(davidson-white), 0) 0%, color(davidson-white) 50%);
z-index: 2;
}
&.teaser--experience-gray {
&:after {
background-image: linear-gradient(rgba(color(gray-lightest), 0) 0%, color(gray-lightest) 50%);
}
}
}
// gray w/image no overlay
.teaser:nth-child(4) {
z-index: 5;
}
// white with description no overlay
.teaser:nth-child(5) {
z-index: 6;
}
// red/blue overlay teasers bottom left row
.teaser:nth-child(6),
.teaser:nth-child(7) {
flex: 0 1 $experience-col1-width/2;
margin-top: -25%;
.teaser__content {
@include experience-overlay-align-bottom;
}
}
// small red
.teaser:nth-child(6) {
z-index: 7;
}
// small blue
.teaser:nth-child(7) {
z-index: 8;
}
}
}
const experienceGrid = () => {
const $ = jQuery;
let currentIndex = 0;
const swapPanel = (animate = true) => {
let randomIndex;
// Make sure we don't choose the same frame twice
do {
// Using round() causes the first and last elements to have half the
// probability, using floor gives a much better spread.
randomIndex = Math.floor(Math.random() * ($panels.length - .001));
} while(randomIndex === currentIndex);
currentIndex = randomIndex;
const $old_teasers = $grid.find('> .teaser');
const $new_teasers = $grid.find(`[data-panel="panel-${randomIndex}"] .teaser`).clone();
$new_teasers.find('.headline-group').removeAttr('id');
if(animate === true) {
$old_teasers.css('opacity',0);
setTimeout(() => {
$new_teasers.insertAfter($grid.find('.experience-grid__intro')).css('opacity',.01);
$old_teasers.remove();
requestAnimationFrame(() => {
$new_teasers.css('transition');
$new_teasers.css('opacity',1);
});
},1000);
} else {
$old_teasers.remove();
$new_teasers.insertAfter($grid.find('.experience-grid__intro'));
}
};
const $grid = $('.experience-grid');
const $panels = $grid.find('.panelset');
if($panels.length <= 1) return; // Only one panel; no point doing anything
swapPanel(false);
$grid.find('button').click((e) => swapPanel(true));
};
(function() {
if (jQuery('.experience-grid').length > 0) {
experienceGrid();
}
})();
There are no notes for this item.