Provider Grid

Original

distributed by

<div class="provider-grid section--inner">
  <div class="provider-grid__inner">
    <figure class="provider-grid__entry">
      <h4 class="provider-grid__entry__header">distributed by</h4>      
        <img class="provider-grid__entry__image" src="https://www.sho.com/assets/images/showtimeanytime/sho7/provider_logos/Uverse.png">
    </figure>
    <figure class="provider-grid__entry">
      <img class="provider-grid__entry__image" src="https://www.sho.com/assets/images/showtimeanytime/sho7/provider_logos/Cox.png" />
    </figure>
    <figure class="provider-grid__entry">
      <img class="provider-grid__entry__image" src="https://www.sho.com/assets/images/showtimeanytime/sho7/provider_logos/Directv.png" />
    </figure>
    <figure class="provider-grid__entry">
      <img class="provider-grid__entry__image" src="https://www.sho.com/assets/images/showtimeanytime/sho7/provider_logos/Dish.png" />
    </figure>
    <figure class="provider-grid__entry">
      <img class="provider-grid__entry__image" src="https://www.sho.com/assets/images/showtimeanytime/sho7/provider_logos/Frontier.png" />
    </figure>
    <figure class="provider-grid__entry">
      <img class="provider-grid__entry__image" src="https://www.sho.com/assets/images/showtimeanytime/sho7/provider_logos/Mediacom.png" />
    </figure>
    <figure class="provider-grid__entry">
      <img class="provider-grid__entry__image" src="https://www.sho.com/assets/images/showtimeanytime/sho7/provider_logos/Optimum.png" />
    </figure>
      <figure class="provider-grid__entry">
      <img class="provider-grid__entry__image" src="https://www.sho.com/assets/images/showtimeanytime/sho7/provider_logos/Spectrum.png" />
    </figure>
    <figure class="provider-grid__entry">
      <img class="provider-grid__entry__image" src="https://www.sho.com/assets/images/showtimeanytime/sho7/provider_logos/Suddenlink.png" />
    </figure>
    <figure class="provider-grid__entry">
      <img class="provider-grid__entry__image" src="https://www.sho.com/assets/images/showtimeanytime/sho7/provider_logos/Fios.png" />
    </figure>
    <figure class="provider-grid__entry">
      <img class="provider-grid__entry__image" src="https://www.sho.com/assets/images/showtimeanytime/sho7/provider_logos/WatchATT.png" />
    </figure>
    <figure class="provider-grid__entry">
      <img class="provider-grid__entry__image" src="https://www.sho.com/assets/images/showtimeanytime/sho7/provider_logos/xfinity.png" />
    </figure>
  </div>
</div>

two-up

with-copy

TV Providers

Stream live on your computer at ShowtimePPV.com

Stream on select devices. Details coming soon.

<div class="provider-grid provider-grid--with-copy section--inner">
  <h4 class="provider-grid__header">TV Providers</h4>
  <div class="provider-grid__inner">
    <figure class="provider-grid__entry">
      <a href="http://www.xfinity.com/boxing">
      <img class="provider-grid__entry__image" 
        src=" https://www.sho.com/assets/images/showtimeanytime/sho7/provider_logos/xfinity.png" />
      </a></figure>
    <figure class="provider-grid__entry">
      <a href="http://www.Directv.com/mayweather_mcgregor">
      <img class="provider-grid__entry__image" 
        src=" https://www.sho.com/assets/images/showtimeanytime/sho7/provider_logos/Directv.png" />
      </a></figure>
    <span class="provider-grid__entry">
      <img class="provider-grid__entry__image" 
        src=" https://www.sho.com/assets/images/showtimeanytime/sho7/provider_logos/Dish.png" />
    </span>
    <figure class="provider-grid__entry">
      <a href="https://www.timewarnercable.com/residential/order?qso=PPV&type=ebf&cid=aff:mayweather:showtime:0817">
      <img class="provider-grid__entry__image" 
        src=" https://www.sho.com/assets/images/showtimeanytime/sho7/provider_logos/twcspectrum.png" />
      </a></figure>
  </div>
</div>

--dynamic-grid (no links)

As seen on /gift-cards

As opposed to our regular grid as seen above, which is 2 col on mobile and 4 on desktop, this uses CSS Grid to dynamically resize columns while keeping a minimum width. This version was introduced for /gift-cards because store logos were too large with the original 4 col version.

One caveat is that IE does not support CSS Grid, and while it does have -ms-grid-columns, repeat() and minmax() are not included in that spec. Using @supports we are able to hide grid styles from IE, since IE ironically (or maybe as expected) doesn't support @supports. This means of course that the regular old grid will appear in IE as a fallback.

    <div class="provider-grid provider-grid--dynamic-grid">
        <div class="provider-grid__inner">
            <figure class="provider-grid__entry">
                <img class="provider-grid__entry__image" src="https://www.sho.com/assets/images/gift-cards/store-logos/Barnes&NobleCollege_logo.svg" />
            </figure>
            <figure class="provider-grid__entry">
                <img class="provider-grid__entry__image" src="https://www.sho.com/assets/images/gift-cards/store-logos/BestBuy_logo.svg" />
            </figure>
            <figure class="provider-grid__entry">
                <img class="provider-grid__entry__image" src="https://www.sho.com/assets/images/gift-cards/store-logos/CVS_logo.svg" />
            </figure>
            <figure class="provider-grid__entry">
                <img class="provider-grid__entry__image" src="https://www.sho.com/assets/images/gift-cards/store-logos/DuaneReade_logo.svg" />
            </figure>
            <figure class="provider-grid__entry">
                <img class="provider-grid__entry__image" src="https://www.sho.com/assets/images/gift-cards/store-logos/GameStop_logo.svg" />
            </figure>
            <figure class="provider-grid__entry">
                <img class="provider-grid__entry__image" src="https://www.sho.com/assets/images/gift-cards/store-logos/HEB_logo.svg" />
            </figure>
            <figure class="provider-grid__entry">
                <img class="provider-grid__entry__image" src="https://www.sho.com/assets/images/gift-cards/store-logos/Meijer_logo.svg" />
            </figure>
            <figure class="provider-grid__entry">
                <img class="provider-grid__entry__image" src="https://www.sho.com/assets/images/gift-cards/store-logos/Speedway_logo.svg" />
            </figure>
            <figure class="provider-grid__entry">
                <img class="provider-grid__entry__image" src="https://www.sho.com/assets/images/gift-cards/store-logos/Walgreens_Logo.svg" />
            </figure>
            <figure class="provider-grid__entry">
                <img class="provider-grid__entry__image" src="https://www.sho.com/assets/images/gift-cards/store-logos/Walmart_logo.svg" />
            </figure>
        </div>
    </div>