Social Blocks

Social Blocks have been re-engineered to be modular, less weight (no images), and to support brand colors.

Basic

Currently, we support ten different blocks that you can put together any way you'd like.

Sonos Studio

The Sonos Studio block. Has a width twice as long as a typical block. The link opens in the same window.

<ul class="social-block">
  <li>
    <a href="https://www.sonos-studio.com" class="button sonos-studio" title="Sonos Studio">
      <span>Sonos<br>Studio</span>
    </a>
  </li>
</ul>

Twitter

The Twitter block. The link opens to the Sonos Twitter account in a new window.

<ul class="social-block">
  <li>
    <a href="https://www.twitter.com/sonos" class="button" target="_blank" title="Twitter">
      <span class="icon-twitter"></span>
    </a>
  </li>
</ul>

Facebook

The Facebook block. The link opens to the Sonos Facebook account in a new window.

<ul class="social-block">
  <li>
    <a href="https://www.facebook.com/sonos" class="button" target="_blank" title="Facebook">
      <span class="icon-facebook"></span>
    </a>
  </li>
</ul>

Instagram

The Instagram block. The link opens to the Sonos Instagram account in a new window.

<ul class="social-block">
  <li>
    <a href="https://www.instagram.com/sonos" class="button" target="_blank" title="Instagram">
      <span class="icon-instagram"></span>
    </a>
  </li>
</ul>

Google+

The Google Plus block. The link opens to the Sonos Google Plus account in a new window.

<ul class="social-block">
  <li>
    <a href="https://plus.google.com/107670103958760496596" class="button" target="_blank" title="Google Plus">
      <span class="icon-gplus"></span>
    </a>
  </li>
</ul>

The Pinterest block. The link opens to the Sonos Pinterest account in a new window.

<ul class="social-block">
  <li>
    <a href="https://www.pinterest.com/sonos" class="button" target="_blank" title="Pinterest">
      <span class="icon-pinterest"></span>
    </a>
  </li>
</ul>

The LinkedIn block. The link opens to the Sonos LinkedIn account in a new window.

<ul class="social-block">
  <li>
    <a href="http://www.linkedin.com/company/sonos-inc." class="button" target="_blank" title="LinkedIn">
      <span class="icon-linkedin"></span>
    </a>
  </li>
</ul>

YouTube

The YouTube block. The link opens to the Sonos YouTube account in a new window.

<ul class="social-block">
  <li>
    <a href="http://www.youtube.com/sonos" class="button" target="_blank" title="YouTube">
      <span class="icon-youtube-play"></span>
    </a>
  </li>
</ul>

Sonos Blog

The Sonos Blog block. The link opens to the Sonos Blog site in the same window.

<ul class="social-block">
  <li>
    <a href="http://blog.sonos.com/" class="button blog" title="Sonos Blog">
      <span>Blog</span>
    </a>
  </li>
</ul>

Weibo

The Weibo block. The link opens to the Sonos Weibo account in a new window.

<ul class="social-block">
  <li>
    <a href="http://www.weibo.com/sonoschina" class="button" target="_blank" title="Weibo">
      <span class="icon-weibo"></span>
    </a>
  </li>
</ul>

Typical Usage

For every local except China, the following group of social blocks are used.

<ul class="social-block">
  <li>
    <a href="http://www.sonos-studio.com/" class="button sonos-studio" title="Sonos Studio">
      <span>Sonos<br>Studio</span>
    </a>
  </li>
  <li>
    <a href="https://www.twitter.com/sonos" class="button" target="_blank" title="Twitter">
      <span class="icon icon-twitter"></span>
    </a>
  </li>
  <li>
    <a href="http://www.facebook.com/sonos" class="button" target="_blank" title="Facebook">
      <span class="icon icon-facebook"></span>
    </a>
  </li>
  <li>
    <a href="http://www.instagram.com/sonos" class="button" target="_blank" title="Instagram">
      <span class="icon icon-instagram"></span>
    </a>
  </li>
</ul>
<ul class="social-block">
  <li>
    <a href="https://plus.google.com/107670103958760496596" class="button" target="_blank" title="Google+">
      <span class="icon icon-gplus"></span>
    </a>
  </li>
  <li>
    <a href="http://www.pinterest.com/sonos/" class="button" target="_blank" title="Pinterest">
      <span class="icon icon-pinterest"></span>
    </a>
  </li>
  <li>
    <a href="http://www.linkedin.com/company/sonos-inc." class="button" target="_blank" title="LinkedIn">
      <span class="icon icon-linkedin"></span>
    </a>
  </li>
  <li>
    <a href="http://www.youtube.com/sonos" class="button" target="_blank" title="YouTube">
      <span class="icon icon-youtube-play"></span>
    </a>
  </li>
  <li>
    <a href="http://blog.sonos.com/" class="button blog" title="Sonos Blog">
      <span>Blog</span>
    </a>
  </li>
</ul>