Social Links

Icons that link to giffgaff's social media accounts. This component is included in the footer


How we design them

  • Links open in a new window

How they look

View demo Open in new window
320 x 568
View code
<ul class="gg-c-social-links">
  <li>
    <a
      rel="noopener noreferrer"
      target="_blank"
      class="gg-c-social-links__link"
      href="https://twitter.com/giffgaff"
    >
      <svg
        class="gg-c-social-links__icon"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 111.9 90.3"
      >
        <title>Twitter</title>
        <path
          d="M111.9,10.8a40.67,40.67,0,0,1-13.2,3.3,23.43,23.43,0,0,0,9.9-12.3A39.61,39.61,0,0,1,93.9,7.5,22.73,22.73,0,0,0,54.3,22.8a29.11,29.11,0,0,0,.3,5.1A64.26,64.26,0,0,1,7.5,3.9a21.26,21.26,0,0,0-3,11.7A22.17,22.17,0,0,0,14.7,34.5a19.38,19.38,0,0,1-10.2-3v.3A22.55,22.55,0,0,0,22.8,54a36,36,0,0,1-6,.9,19.81,19.81,0,0,1-4.2-.3c3,9,11.1,15.3,21.3,15.9A46.64,46.64,0,0,1,5.7,80.4,36.31,36.31,0,0,1,0,80.1,65.67,65.67,0,0,0,34.8,90.3C77.1,90,99.9,55.2,99.9,25.2v-3A43.46,43.46,0,0,0,111.9,10.8Z"
        />
      </svg>
    </a>
  </li>

  <li>
    <a
      rel="noopener noreferrer"
      target="_blank"
      class="gg-c-social-links__link"
      href="https://www.facebook.com/giffgaffmobile"
    >
      <svg
        class="gg-c-social-links__icon"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 64.8 124.2"
      >
        <title>Facebook</title>
        <path
          d="M42.9,68.4c0-.3,0-.3.3-.3H61.5a.29.29,0,0,0,.3-.3c.3-2.7,2.7-21.9,2.7-22.2H43.2c-.3,0-.3,0-.3-.3v-15c0-1.2.3-3,.3-3.9.3-2.7,2.7-4.2,5.1-5.1a29.11,29.11,0,0,1,5.1-.3H64.8V.9C63.9.9,49.5,0,46.5,0A31.82,31.82,0,0,0,32.7,3c-5.7,3-9.3,7.2-12,13.2-.9,2.7-1.2,4.8-1.8,7.2a44.31,44.31,0,0,0-.3,6.3v15c0,.3,0,.3-.3.3H0V67.2H18.3c.3,0,.3,0,.3.3v56.7h24C42.9,124.2,42.9,85.8,42.9,68.4Z"
        />
      </svg>
    </a>
  </li>

  <li>
    <a
      rel="noopener noreferrer"
      target="_blank"
      class="gg-c-social-links__link"
      href="https://www.linkedin.com/company/giffgaff/"
    >
      <svg
        class="gg-c-social-links__icon"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 90.6 86.4"
      >
        <title>LinkedIn</title>
        <path
          d="M90.6,53.1V86.4H71.1V55.2c0-7.8-2.7-13.2-9.9-13.2-5.4,0-8.4,3.6-9.9,7.2a11.7,11.7,0,0,0-.6,4.8V86.4H31.2s.3-52.8,0-58.2H50.7v8.4c2.7-3.9,7.2-9.6,17.4-9.6C81,26.7,90.6,35.1,90.6,53.1ZM11.1,0C4.5,0,0,4.2,0,10.2c0,5.7,4.2,10.2,10.8,10.2,6.9,0,11.1-4.5,11.1-10.2S17.7,0,11.1,0ZM1.2,86.4H20.7V28.2H1.2Z"
        />
      </svg>
    </a>
  </li>

  <li>
    <a
      rel="noopener noreferrer"
      target="_blank"
      class="gg-c-social-links__link"
      href="https://www.youtube.com/user/giffgaffTV"
    >
      <svg
        class="gg-c-social-links__icon"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 106.8 75.9"
      >
        <title>Youtube</title>
        <path
          d="M53.1,75.6h0ZM52.8,0h0Zm51.9,13.8c-2.1-8.1-6-11.1-12.9-12.3C87.9,1.2,68.1.3,53.1.3c-15.3,0-34.8.9-38.7,1.2C7.8,2.7,3.9,5.7,1.8,13.8.9,16.5,0,31.5,0,37.5v1.2c0,5.7.9,20.7,1.8,23.7,2.1,8.1,6,11.1,12.9,12.3,3.9.3,23.7,1.2,38.7,1.2,15.3,0,34.8-.9,38.7-1.2,6.9-1.2,10.8-4.2,12.9-12.3.9-2.7,1.8-17.7,1.8-23.7V37.5C106.5,31.5,105,16.5,104.7,13.8ZM42,52.5V21.9L70.2,36.6Z"
        />
      </svg>
    </a>
  </li>

  <li>
    <a
      rel="noopener noreferrer"
      target="_blank"
      class="gg-c-social-links__link"
      href="https://www.instagram.com/giffgaffmobile/"
    >
      <svg
        class="gg-c-social-links__icon"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 108.6 108.6"
      >
        <title>Instagram</title>
        <path
          d="M77.7,108.6H30.9A30.86,30.86,0,0,1,0,77.7V30.9A30.86,30.86,0,0,1,30.9,0H77.7a30.86,30.86,0,0,1,30.9,30.9V77.7a30.86,30.86,0,0,1-30.9,30.9ZM30.9,9.3A21.51,21.51,0,0,0,9.3,30.9V77.7A21.51,21.51,0,0,0,30.9,99.3H77.7A21.51,21.51,0,0,0,99.3,77.7V30.9A21.51,21.51,0,0,0,77.7,9.3ZM54.3,82.2A27.9,27.9,0,1,1,82.2,54.3,28,28,0,0,1,54.3,82.2Zm0-46.5A18.6,18.6,0,1,0,72.9,54.3,18.69,18.69,0,0,0,54.3,35.7ZM83.4,18.3A6.6,6.6,0,1,0,90,24.9,6.66,6.66,0,0,0,83.4,18.3Z"
        />
      </svg>
    </a>
  </li>
</ul>