<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."
    }
  ]
}
  • Content:
    .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;
    }
    
  • URL: /components/raw/sponsor-block/sponsor-block.scss
  • Filesystem Path: patterns\06-components\sponsor-block\sponsor-block.scss
  • Size: 2 KB

value for panelColorTheme is set in the CMS, and is not based on sponsor count.