<div class="c-sponsor-block c-sponsor-block--2" data-bkg-theme="base">
<div class="o-container">
<h2 class="c-sponsor-block__title f-title--h3" id="sponsor-block-1845">Exhibit sponsors</h2>
<div class="c-sponsor-block__content">
<div class="c-sponsor-block__description o-wysiwyg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus euismod molestie bibendum. Donec blandit, ante vitae posuere posuere, nulla odio sagittis tellus, ac tristique velit est non gravida.</p>
</div>
<ul class="c-sponsor-block__list" aria-labelledby="sponsor-block-1845">
<li class="c-sponsor-block__item">
<div class="c-sponsor-block__logo">
<a href="#" target="blank" rel="noopener nofollow">
<span class="u-sr-only">William Penn Foundation</span>
<div class="c-sponsor-block__item-image">
<img src="/images/sample-logos/william_penn_lg.png" alt="" />
</div>
</a>
</div>
<p class="c-sponsor-block__desc f-text--xsmall">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu luctus ex. Ut ac diam cursus, condimentum tortor sit sed.</p>
</li>
<li class="c-sponsor-block__item">
<div class="c-sponsor-block__logo">
<a href="#" target="blank" rel="noopener nofollow">
<span class="u-sr-only">Drexel University College of Arts and Sciences</span>
<div class="c-sponsor-block__item-image">
<img src="/images/sample-logos/drexel_lg.png" alt="" />
</div>
</a>
</div>
<p class="c-sponsor-block__desc f-text--xsmall">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu luctus ex. Ut ac diam cursus, condimentum tortor sit sed.</p>
</li>
</ul>
</div>
</div>
</div>
{% set panelColorTheme = panelColorTheme ? panelColorTheme : 'base' %}
{% set hID = 'sponsor-block-' ~ random(5000) %}
{% set sponsorCount = items|length %}
<div class="c-sponsor-block c-sponsor-block--{{ sponsorCount }}" data-bkg-theme="{{ panelColorTheme }}">
<div class="o-container">
<h2 class="c-sponsor-block__title f-title--h3" id="{{ hID }}">{{title}}</h2>
<div class="c-sponsor-block__content">
{% if description %}
<div class="c-sponsor-block__description o-wysiwyg">
{{ description }}
</div>
{% endif %}
<ul class="c-sponsor-block__list" aria-labelledby="{{ hID }}">
{% for item in items %}
<li class="c-sponsor-block__item">
<div class="c-sponsor-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 %}
<div class="c-sponsor-block__item-image">
{{ item.image }}
</div>
{% if item.link %}
</a>
{% endif %}
</div>
<p class="c-sponsor-block__desc f-text--xsmall">{{item.desc}}</p>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
{
"pageColorTheme": "teal",
"panelColorTheme": "base",
"title": "Exhibit sponsors",
"description": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus euismod molestie bibendum. Donec blandit, ante vitae posuere posuere, nulla odio sagittis tellus, ac tristique velit est non gravida.</p>",
"items": [
{
"image": "<img src=\"/images/sample-logos/william_penn_lg.png\" alt=\"\" />",
"link": "#",
"title": "William Penn Foundation",
"desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu luctus ex. Ut ac diam cursus, condimentum tortor sit sed."
},
{
"image": "<img src=\"/images/sample-logos/drexel_lg.png\" alt=\"\" />",
"link": "#",
"title": "Drexel University College of Arts and Sciences",
"desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu luctus ex. Ut ac diam cursus, condimentum tortor sit sed."
}
]
}
.c-sponsor-block {
margin: 6.4rem 0;
@include break($sm) {
margin: 9.6rem 0;
}
&[data-bkg-theme="light"] {
margin: 0;
padding: 6.4rem 0;
@include break($sm) {
margin: 0;
padding: 9.6rem 0;
}
}
}
.c-sponsor-block__content {
.c-sponsor-block--1 & {
@include break($sm) {
display: flex;
align-items: center;
flex-direction: row-reverse;
}
}
}
.c-sponsor-block__title {
margin: 0 3.2rem;
border-bottom: 0.1rem solid var(--ct-txt);
padding-bottom: 2.4rem;
}
.c-sponsor-block__description {
margin: 4.8rem auto 3.2rem;
> * {
max-width: 70rem;
margin-left: auto;
margin-right: auto;
}
.c-sponsor-block--1 & {
@include break($sm) {
flex: 0 0 50%;
padding-left: 2.4rem;
> * {
max-width: 50rem;
}
}
}
}
.c-sponsor-block__list {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
width: 100%;
}
.c-sponsor-block__logo {
height: 15rem;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.c-sponsor-block__item {
padding: 0 2.4rem 3.2rem;
height: 100%;
display: block;
@include break($sm) {
flex: 0 0 50%;
max-width: 50%;
}
@include break($sm-md) {
flex: 0 0 33%;
max-width: 33%;
}
.c-sponsor-block--1 & {
@include break($sm) {
flex: 0 0 100%;
max-width: 100%;
}
@include break($sm-md) {
flex: 0 0 100%;
max-width: 100%;
}
}
.c-sponsor-block--4 &,
.c-sponsor-block--6 & {
max-width: none;
@include break($sm-md) {
flex: 0 0 35%;
max-width: 35%;
}
}
img {
max-width: 100%;
width: auto;
max-height: 100%;
margin: 0 auto;
}
}
.c-sponsor-block__desc {
text-align: center;
max-width: 35rem;
margin: 2.4rem auto 0;
}
value for panelColorTheme is set in the CMS, and is not based on sponsor count.