England Football

Secondary Sponsors 

<div class="secondary-sponsors container">
    <div class="container__content">
        <ul class="secondary-sponsors__logos">
            <li>
                <a href="#" target="_blank">
                    <img src="/assets/example-content/secondary-sponsors/footer-google-cloud.png" aria-label="Google-cloud" alt="Google-cloud" />
                </a>
            </li>
            <li>
                <a href="#" target="_blank">
                    <img src="/assets/example-content/secondary-sponsors/footer-lucozade.png" aria-label="Lucozade" alt="Lucozade" />
                </a>
            </li>
            <li>
                <a href="#" target="_blank">
                    <img src="/assets/example-content/secondary-sponsors/footer-deliveroo.png" aria-label="Deliveroo" alt="Deliveroo" />
                </a>
            </li>
            <li>
                <a href="#" target="_blank">
                    <img src="/assets/example-content/secondary-sponsors/footer-nationwide.png" aria-label="Nationwide" alt="Nationwide" />
                </a>
            </li>
            <li>
                <a href="#" target="_blank">
                    <img src="/assets/example-content/secondary-sponsors/footer-paypal.png" aria-label="Paypal" alt="Paypal" />
                </a>
            </li>
            <li>
                <a href="#" target="_blank">
                    <img src="/assets/example-content/secondary-sponsors/footer-disney.png" aria-label="Disney" alt="Disney" />
                </a>
            </li>
            <li>
                <a href="#" target="_blank">
                    <img src="/assets/example-content/secondary-sponsors/footer-national-express.png" aria-label="National-express" alt="National-express" />
                </a>
            </li>
            <li>
                <a href="#" target="_blank">
                    <img src="/assets/example-content/secondary-sponsors/footer-snickers.png" aria-label="Snickers" alt="Snickers" />
                </a>
            </li>
            <li>
                <a href="#" target="_blank">
                    <img src="/assets/example-content/secondary-sponsors/footer-ee.png" aria-label="EE" alt="EE" />
                </a>
            </li>
            <li>
                <a href="#" target="_blank">
                    <img src="/assets/example-content/secondary-sponsors/footer-lg.png" aria-label="LG" alt="LG" />
                </a>
            </li>
            <li>
                <a href="#" target="_blank">
                    <img src="/assets/example-content/secondary-sponsors/footer-emirates.png" aria-label="Emirates" alt="Emirates" />
                </a>
            </li>
            <li>
                <a href="#" target="_blank">
                    <img src="/assets/example-content/secondary-sponsors/footer-McDonald.png" aria-label="McDonald" alt="McDonald" />
                </a>
            </li>
            <li>
                <a href="#" target="_blank">
                    <img src="/assets/example-content/secondary-sponsors/footer-budweiser.png" aria-label="Budweiser" alt="Budweiser" />
                </a>
            </li>
            <li>
                <a href="#" target="_blank">
                    <img src="/assets/example-content/secondary-sponsors/footer-continental.png" aria-label="Continental" alt="Continental" />
                </a>
            </li>
            <li>
                <a href="#" target="_blank">
                    <img src="/assets/example-content/secondary-sponsors/footer-mitre.png" aria-label="Mitre" alt="Mitre" />
                </a>
            </li>
            <li>
                <a href="#" target="_blank">
                    <img src="/assets/example-content/secondary-sponsors/footer-cognizant.png" aria-label="Cognizant" alt="Cognizant" />
                </a>
            </li>
            <li>
                <a href="#" target="_blank">
                    <img src="/assets/example-content/secondary-sponsors/footer-pokemon.png" aria-label="Pokemon" alt="Pokemon" />
                </a>
            </li>
            <li>
                <a href="#" target="_blank">
                    <img src="/assets/example-content/secondary-sponsors/footer-buildbase.png" aria-label="Buildbase" alt="Buildbase" />
                </a>
            </li>
            <li>
                <a href="#" target="_blank">
                    <img src="/assets/example-content/secondary-sponsors/footer-boots.png" aria-label="Boots" alt="Boots" />
                </a>
            </li>
        </ul>
    </div>
</div>

No notes defined.

{
  "sponsors": [
    {
      "alt": "Google-cloud",
      "logo": "/assets/example-content/secondary-sponsors/footer-google-cloud.png"
    },
    {
      "alt": "Lucozade",
      "logo": "/assets/example-content/secondary-sponsors/footer-lucozade.png"
    },
    {
      "alt": "Deliveroo",
      "logo": "/assets/example-content/secondary-sponsors/footer-deliveroo.png"
    },
    {
      "alt": "Nationwide",
      "logo": "/assets/example-content/secondary-sponsors/footer-nationwide.png"
    },
    {
      "alt": "Paypal",
      "logo": "/assets/example-content/secondary-sponsors/footer-paypal.png"
    },
    {
      "alt": "Disney",
      "logo": "/assets/example-content/secondary-sponsors/footer-disney.png"
    },
    {
      "alt": "National-express",
      "logo": "/assets/example-content/secondary-sponsors/footer-national-express.png"
    },
    {
      "alt": "Snickers",
      "logo": "/assets/example-content/secondary-sponsors/footer-snickers.png"
    },
    {
      "alt": "EE",
      "logo": "/assets/example-content/secondary-sponsors/footer-ee.png"
    },
    {
      "alt": "LG",
      "logo": "/assets/example-content/secondary-sponsors/footer-lg.png"
    },
    {
      "alt": "Emirates",
      "logo": "/assets/example-content/secondary-sponsors/footer-emirates.png"
    },
    {
      "alt": "McDonald",
      "logo": "/assets/example-content/secondary-sponsors/footer-McDonald.png"
    },
    {
      "alt": "Budweiser",
      "logo": "/assets/example-content/secondary-sponsors/footer-budweiser.png"
    },
    {
      "alt": "Continental",
      "logo": "/assets/example-content/secondary-sponsors/footer-continental.png"
    },
    {
      "alt": "Mitre",
      "logo": "/assets/example-content/secondary-sponsors/footer-mitre.png"
    },
    {
      "alt": "Cognizant",
      "logo": "/assets/example-content/secondary-sponsors/footer-cognizant.png"
    },
    {
      "alt": "Pokemon",
      "logo": "/assets/example-content/secondary-sponsors/footer-pokemon.png"
    },
    {
      "alt": "Buildbase",
      "logo": "/assets/example-content/secondary-sponsors/footer-buildbase.png"
    },
    {
      "alt": "Boots",
      "logo": "/assets/example-content/secondary-sponsors/footer-boots.png"
    }
  ]
}
  • Content: 
    .secondary-sponsors {
  padding: 2.5rem 0 2rem 0;
  &__logos {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 4rem;
    li {
      padding: 0 1rem;
    }
    img {
      max-height: 4.1rem;
      margin: 0 auto;
    }
  }

  @media screen and (max-width: $mq-small) {
    &__logos {
      li {
        width: 33%;
        min-width: 33%;
      }
    }
  }

  @media screen and (min-width: $mq-small) {
    &__logos {
      li {
        max-width: 25%;
        min-width: 25%;
      }
    }
  }

  @media screen and (min-width: $mq-large) {
    &__logos {
      li {
        width: 8.3%;
        min-width: 8.3%;
      }
    }
  }
}
  • URL: /components/raw/secondary-sponsors/secondary-sponsors.scss
  • Filesystem Path: src/library/modules/footer-sponsorship/secondary-sponsors/secondary-sponsors.scss
  • Size: 692 Bytes 
<div class="secondary-sponsors container">
    <div class="container__content">
        <ul class="secondary-sponsors__logos">
            {{#each sponsors}}
            <li>
                <a href="#" target="_blank">
                    <img src="{{logo}}" aria-label="{{alt}}" alt="{{alt}}" />
                </a>
            </li>
            {{/each}}
        </ul>
    </div>
</div>