Provider Device Logos

Stream on Your Favorite Devices or online at SHOWTIME.com

iPad iPhone Apple TV Android Android TV Chromecast PS4 Fire Fire TV LG Oculus Roku Samsung Xbox One

<section class="device-logos">
  <div class="section--inner"><!-- in sho context only -->
    <h2 class="device-logos__title">Stream on Your Favorite Devices or online at SHOWTIME.com</h2>
    <div class="device-logos__image">
      <em class="device-logos__image-alt-text">
        iPad
        iPhone
        Apple TV
        Android
        Android TV
        Chromecast
        PS4
        Fire
        Fire TV
        LG
        Oculus
        Roku
        Samsung
        Xbox One
      </em> 
    </div>
  </div>
</section>

This component is just a static collection of logos for the various devices and platforms that can be used to stream Showtime. Used in /order-showtime and /stream-showtime

Previously, this was just a bunch of pngs, but it has been implemented here as a single svg in order to have greater control over the positioning of the logos at different sizes (and for fewer image requests).

there are actually two different svgs - on mobile the logos are laid out in a tight cluster but on desktop they are in two neat rows. the svgs are rendered via background-image:url() with css, so applying the responsive rules to swap the art is trivial. the paths to the svgs are as follows:

/styleguide/assets/svg/provider-device-logos/mobile.min.svg;
/styleguide/assets/svg/provider-device-logos/desktop.min.svg;

the root of this path changes by context, see /styleguide/icons and look at variables.env.scss for more

the .min in the filename is a nod to the fact that they have been optimized with https://github.com/svg/svgo, in the event that these images are updated, be sure to optimize the refreshed svgs accordingly:

$ svgo test.svg -o test.min.svg

from https://github.com/svg/svgo

there is also an alternate (white on black) version