<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
          }
        }
      ]
    ]
  }
}
  • Content:
    $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;
            }
        }
    }
  • URL: /components/raw/experience-grid/experience-grid.scss
  • Filesystem Path: patterns/organisms/experience-grid/experience-grid.scss
  • Size: 4.3 KB
  • Content:
    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();
      }
    })();
    
  • URL: /components/raw/experience-grid/experience-grid.js
  • Filesystem Path: patterns/organisms/experience-grid/experience-grid.js
  • Size: 1.5 KB

There are no notes for this item.