<div class="c-logo-block" data-bkg-theme="">
<div class="o-container">
<h2 class="c-logo-block__title f-title--h3" id="sponsor-block-2897">Our research partners</h2>
<ul class="c-logo-block__list" aria-labelledby="sponsor-block-2897">
<li class="c-logo-block__logo">
<a href="#" target="blank" rel="noopener nofollow">
<span class="u-sr-only">National fish and wildlife foundation</span>
<img src="/images/sample-logos/fish_wildlife.png" alt="" />
</a>
</li>
<li class="c-logo-block__logo">
<a href="#" target="blank" rel="noopener nofollow">
<span class="u-sr-only">EPA</span>
<img src="/images/sample-logos/epa.png" alt="" />
</a>
</li>
<li class="c-logo-block__logo">
<a href="#" target="blank" rel="noopener nofollow">
<span class="u-sr-only">Upstream Alliance</span>
<img src="/images/sample-logos/upstream.png" alt="" />
</a>
</li>
<li class="c-logo-block__logo">
<a href="#" target="blank" rel="noopener nofollow">
<span class="u-sr-only">Pennsylvania Department of Environmental Protection</span>
<img src="/images/sample-logos/pa_dep.png" alt="" />
</a>
</li>
<li class="c-logo-block__logo">
<a href="#" target="blank" rel="noopener nofollow">
<span class="u-sr-only">Philadelphia Water Department</span>
<img src="/images/sample-logos/water.png" alt="" />
</a>
</li>
<li class="c-logo-block__logo">
<a href="#" target="blank" rel="noopener nofollow">
<span class="u-sr-only">New Jersey Audobon</span>
<img src="/images/sample-logos/audobon.png" alt="" />
</a>
</li>
<li class="c-logo-block__logo">
<a href="#" target="blank" rel="noopener nofollow">
<span class="u-sr-only">Drexel University College of Arts and Sciences</span>
<img src="/images/sample-logos/drexel.png" alt="" />
</a>
</li>
<li class="c-logo-block__logo">
<a href="#" target="blank" rel="noopener nofollow">
<span class="u-sr-only">The Valley - Darby Creek Valley Association</span>
<img src="/images/sample-logos/lee_valley.png" alt="" />
</a>
</li>
<li class="c-logo-block__logo">
<a href="#" target="blank" rel="noopener nofollow">
<span class="u-sr-only">Barnegat Bay Partnership</span>
<img src="/images/sample-logos/barnegat_bay.png" alt="" />
</a>
</li>
<li class="c-logo-block__logo">
<a href="#" target="blank" rel="noopener nofollow">
<span class="u-sr-only">Stroud Water Research Center</span>
<img src="/images/sample-logos/stroud.png" alt="" />
</a>
</li>
<li class="c-logo-block__logo">
<a href="#" target="blank" rel="noopener nofollow">
<span class="u-sr-only">Open Space Institute</span>
<img src="/images/sample-logos/open_space.png" alt="" />
</a>
</li>
<li class="c-logo-block__logo">
<a href="#" target="blank" rel="noopener nofollow">
<span class="u-sr-only">William Penn Foundation</span>
<img src="/images/sample-logos/william_penn.png" alt="" />
</a>
</li>
</ul>
</div>
</div>
{% set panelColorTheme = panelColorTheme ? panelColorTheme : 'base' %}
{% set hID = 'sponsor-block-' ~ random(5000) %}
<div class="c-logo-block" data-bkg-theme="{{ panelColorTheme }}">
<div class="o-container">
<h2 class="c-logo-block__title f-title--h3" id="{{ hID }}">{{title}}</h2>
<ul class="c-logo-block__list" aria-labelledby="{{ hID }}">
{% for item in items %}
{% if loop.index < 13 %}
<li class="c-logo-block__logo">
{% if item.link %}
<a href="{{ item.link }}" target="blank" rel="noopener nofollow">
{% if item.title %}
<span class="u-sr-only">{{ item.title }}</span>
{% endif %}
{% endif %}
{{ item.image }}
{% if item.link %}
</a>
{% endif %}
</li>
{% endif %}
{% endfor %}
</ul>
{% if items|length > 12 %}
{% embed "04-objects/accordion" with {
buttonClasses: 'o-btn',
classes: 'c-logo-block__accordion',
btnAfter: true,
} %}
{% block buttonContent %}
<span class="f-text--cta c-logo-block__accordion-text">
<span class="c-logo-block__accordion-closed">View All Sponsors</span>
<span class="c-logo-block__accordion-open">View Less Sponsors</span>
<span class="c-logo-block__accordion-icon" aria-hidden="true">
{% include "03-icons/plus" %}
</span>
</span>
{% endblock buttonContent %}
{% block accordionContent %}
<ul class="c-logo-block__accordion-content">
{% for item in items %}
{% if loop.index > 12 %}
<li class="c-logo-block__accordion-item">
{% if item.link %}
<a href="{{ item.link }}" target="blank" rel="noopener nofollow">
{% endif %}
{{ item.title }}
{% if item.link %}
</a>
{% endif %}
</li>
{% endif %}
{% endfor %}
</ul>
{% endblock accordionContent %}
{% endembed %}
{% endif %}
</div>
</div>
{
"pageColorTheme": "teal",
"title": "Our research partners",
"items": [
{
"image": "<img src=\"/images/sample-logos/fish_wildlife.png\" alt=\"\" />",
"link": "#",
"title": "National fish and wildlife foundation"
},
{
"image": "<img src=\"/images/sample-logos/epa.png\" alt=\"\" />",
"link": "#",
"title": "EPA"
},
{
"image": "<img src=\"/images/sample-logos/upstream.png\" alt=\"\" />",
"link": "#",
"title": "Upstream Alliance"
},
{
"image": "<img src=\"/images/sample-logos/pa_dep.png\" alt=\"\" />",
"link": "#",
"title": "Pennsylvania Department of Environmental Protection"
},
{
"image": "<img src=\"/images/sample-logos/water.png\" alt=\"\" />",
"link": "#",
"title": "Philadelphia Water Department"
},
{
"image": "<img src=\"/images/sample-logos/audobon.png\" alt=\"\" />",
"link": "#",
"title": "New Jersey Audobon"
},
{
"image": "<img src=\"/images/sample-logos/drexel.png\" alt=\"\" />",
"link": "#",
"title": "Drexel University College of Arts and Sciences"
},
{
"image": "<img src=\"/images/sample-logos/lee_valley.png\" alt=\"\" />",
"link": "#",
"title": "The Valley - Darby Creek Valley Association"
},
{
"image": "<img src=\"/images/sample-logos/barnegat_bay.png\" alt=\"\" />",
"link": "#",
"title": "Barnegat Bay Partnership"
},
{
"image": "<img src=\"/images/sample-logos/stroud.png\" alt=\"\" />",
"link": "#",
"title": "Stroud Water Research Center"
},
{
"image": "<img src=\"/images/sample-logos/open_space.png\" alt=\"\" />",
"link": "#",
"title": "Open Space Institute"
},
{
"image": "<img src=\"/images/sample-logos/william_penn.png\" alt=\"\" />",
"link": "#",
"title": "William Penn Foundation"
}
]
}
.c-logo-block {
margin: 8rem 0;
&[data-bkg-theme="light"] {
margin: 0;
padding: 8rem 0;
}
}
.c-logo-block__title {
border-bottom: 1px $c-black solid;
padding-bottom: 4rem;
margin-bottom: 4rem;
}
.c-logo-block__list {
grid-template-columns: repeat(2, 1fr);
display: grid;
@include break($sm) {
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(2, 200px);
}
}
.c-logo-block__logo {
padding: 2rem;
a {
display: block;
}
img {
margin: 0 auto;
}
}
.c-logo-block__accordion {
.o-accordion__button {
margin-top: 1.6rem;
}
.o-accordion__panel {
padding: 3.2rem 0;
@include break($sm) {
padding: 6.4rem 0;
}
}
}
.c-logo-block__accordion-content {
columns: 2 auto;
}
.c-logo-block__accordion-text {
display: inline-flex;
align-items: center;
}
.c-logo-block__accordion-icon {
margin-left: 0.8rem;
transition: all 0.24s ease-in-out;
.is-open & {
transform: rotate(45deg);
}
svg {
display: block;
}
}
.c-logo-block__accordion-item {
padding: 1.5rem 3.2rem 1.5rem 0;
a {
display: block;
&:hover {
text-decoration: underline;
}
}
}
.c-logo-block__accordion-closed {
.is-open & {
display: none;
}
}
.c-logo-block__accordion-open {
display: none;
.is-open & {
display: inline;
}
}
No notes defined.