University of Leeds Design System v1.0.14

Social media

No notes defined.

{% if social_links | length %}
<div class="uol-footer-social-media">
  {% for link in social_links %}
    <a class="uol-footer-social-media__item" href="{{ link.url }}" aria-label="{{ link.title }}">
      {% include '@uol-icon-' + link.label %}
    </a>
  {% endfor %}
</div>
{% endif %}
 
<div class="uol-footer-social-media">

    <a class="uol-footer-social-media__item" href="https://youtube.com/user/universityofleedsuk" aria-label="YouTube">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" focusable="false">
            <path fill="#000000" fill-rule="nonzero" d="M9.6 17.25V6.45l7.2 5.4m4.8-9.12c-.72-.24-5.16-.48-9.6-.48l-9.6.456C.528 3.33 0 7.53 0 11.85c0 4.308.528 8.52 2.4 9.132.72.24 5.16.468 9.6.468l9.6-.468c1.872-.612 2.4-4.824 2.4-9.132 0-4.32-.528-8.508-2.4-9.12z"></path>
        </svg>

    </a>

    <a class="uol-footer-social-media__item" href="https://twitter.com/UniversityLeeds" aria-label="Twitter">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" focusable="false">
            <path fill-rule="nonzero" d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path>
        </svg>

    </a>

    <a class="uol-footer-social-media__item" href="https://instagram.com/universityofleeds/?hl=en" aria-label="Instagram">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" focusable="false">
            <path fill="#000000" fill-rule="nonzero" d="M6.96 0h10.08C20.88 0 24 3.12 24 6.96v10.08A6.96 6.96 0 0 1 17.04 24H6.96C3.12 24 0 20.88 0 17.04V6.96A6.96 6.96 0 0 1 6.96 0m-.24 2.4A4.32 4.32 0 0 0 2.4 6.72v10.56a4.32 4.32 0 0 0 4.32 4.32h10.56a4.32 4.32 0 0 0 4.32-4.32V6.72a4.32 4.32 0 0 0-4.32-4.32H6.72M18.3 4.2a1.5 1.5 0 1 1 0 3 1.5 1.5 0 1 1 0-3M12 6a6 6 0 1 1 0 12 6 6 0 1 1 0-12m0 2.4a3.6 3.6 0 0 0 0 7.2 3.6 3.6 0 0 0 0-7.2z"></path>
        </svg>

    </a>

    <a class="uol-footer-social-media__item" href="https://www.linkedin.com/school/7244" aria-label="LinkedIn">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" focusable="false">
            <path fill="#000000" fill-rule="nonzero" d="M24 24h-5.333v-9c0-1.413-1.587-2.587-3-2.587S13.333 13.587 13.333 15v9H8V8h5.333v2.667C14.213 9.24 16.48 8.32 18 8.32c3.333 0 6 2.72 6 6.013V24M5.333 24H0V8h5.333v16M2.667 0C4.14 0 5.333 1.194 5.333 2.667S4.14 5.333 2.667 5.333 0 4.14 0 2.667 1.194 0 2.667 0z"></path>
        </svg>

    </a>

    <a class="uol-footer-social-media__item" href="https://www.facebook.com/universityofleeds/" aria-label="Facebook">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" focusable="false">
            <path fill="#000000" fill-rule="nonzero" d="M18 0h0v4.8h-2.4c-.828 0-1.2.972-1.2 1.8v3H18v4.8h-3.6V24H9.6v-9.6H6V9.6h3.6V4.8A4.8 4.8 0 0 1 14.4 0H18z"></path>
        </svg>

    </a>

    <a class="uol-footer-social-media__item" href="https://medium.com/university-of-leeds" aria-label="Medium">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" focusable="false">
            <path fill="#000000" fill-rule="evenodd" d="M24 1.5h-6.687l-4.757 13.348L7.15 1.5H.005v.663l2.517 3.43-.034 13.245L0 22.623l.005.627h7.027l.018-.577-2.944-3.836.078-10.72 6.207 15.132h.75l5.513-15.5v12.6l-2.26 2.383v.508H24v-.61l-2.202-2.328-.03-16.02L24 2.167V1.5z"></path>
        </svg>

    </a>

    <a class="uol-footer-social-media__item" href="https://www.weibo.com/leedsuniversityuk" aria-label="Weibo">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" focusable="false">
            <path fill="#000000" fill-rule="nonzero" d="M10.9 20.894c-3.74.39-6.968-1.394-7.2-3.984s2.593-5.006 6.33-5.396 6.968 1.393 7.2 3.982-2.592 5.008-6.33 5.398m7.48-8.6c-.318-.1-.536-.17-.37-.6.36-.957.398-1.784.007-2.374-.733-1.105-2.74-1.046-5.04-.03 0-.001-.722.334-.537-.27.354-1.2.3-2.205-.25-2.786-1.247-1.318-4.566.05-7.41 3.05-2.13 2.25-3.368 4.633-3.368 6.694 0 3.942 4.79 6.338 9.477 6.338 6.143 0 10.23-3.766 10.23-6.756 0-1.807-1.442-2.832-2.738-3.256m4.08-7.213c-1.483-1.735-3.672-2.396-5.69-1.944h-.001c-.467.105-.765.59-.664 1.082s.56.807 1.026.702c1.437-.322 2.992.15 4.047 1.38s1.34 2.914.888 4.39v.001c-.147.48.102.994.557 1.15s.94-.107 1.09-.586c.633-2.08.233-4.44-1.25-6.175"></path>
            <path d="M19.74 7.668c-.7-.766-1.738-1.057-2.693-.857a.71.71 0 0 0-.556.846c.084.383.468.63.858.546v.001a1.4 1.4 0 0 1 1.318.418c.343.374.435.886.288 1.333h.001a.71.71 0 0 0 .465.896c.38.12.788-.085.91-.46a2.75 2.75 0 0 0-.592-2.724m-8.817 8.113a.53.53 0 0 1-.628.228c-.217-.087-.284-.327-.162-.537s.397-.31.613-.227c.22.08.3.32.177.536m-1.158 1.463c-.35.552-1.104.794-1.67.54-.56-.25-.723-.892-.372-1.43S8.8 15.578 9.36 15.8c.57.24.752.876.406 1.433m1.32-3.905c-1.73-.443-3.684.405-4.434 1.904-.765 1.53-.026 3.226 1.72 3.782 1.8.574 3.942-.306 4.684-1.957.732-1.614-.18-3.275-1.97-3.73"></path>
        </svg>

    </a>

    <a class="uol-footer-social-media__item" href="https://www.tiktok.com/@universityofleeds" aria-label="TikTok">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
            <path d="M9 0h1.98c.144.715.54 1.617 1.235 2.512C12.895 3.389 13.797 4 15 4v2c-1.753 0-3.07-.814-4-1.829V11a5 5 0 1 1-5-5v2a3 3 0 1 0 3 3V0Z"></path>
        </svg>

    </a>

    <a class="uol-footer-social-media__item" href="https://www.threads.net/@universityofleeds" aria-label="Threads">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 448 512">
            <path d="M331.5 235.7c2.2 .9 4.2 1.9 6.3 2.8c29.2 14.1 50.6 35.2 61.8 61.4c15.7 36.5 17.2 95.8-30.3 143.2c-36.2 36.2-80.3 52.5-142.6 53h-.3c-70.2-.5-124.1-24.1-160.4-70.2c-32.3-41-48.9-98.1-49.5-169.6V256v-.2C17 184.3 33.6 127.2 65.9 86.2C102.2 40.1 156.2 16.5 226.4 16h.3c70.3 .5 124.9 24 162.3 69.9c18.4 22.7 32 50 40.6 81.7l-40.4 10.8c-7.1-25.8-17.8-47.8-32.2-65.4c-29.2-35.8-73-54.2-130.5-54.6c-57 .5-100.1 18.8-128.2 54.4C72.1 146.1 58.5 194.3 58 256c.5 61.7 14.1 109.9 40.3 143.3c28 35.6 71.2 53.9 128.2 54.4c51.4-.4 85.4-12.6 113.7-40.9c32.3-32.2 31.7-71.8 21.4-95.9c-6.1-14.2-17.1-26-31.9-34.9c-3.7 26.9-11.8 48.3-24.7 64.8c-17.1 21.8-41.4 33.6-72.7 35.3c-23.6 1.3-46.3-4.4-63.9-16c-20.8-13.8-33-34.8-34.3-59.3c-2.5-48.3 35.7-83 95.2-86.4c21.1-1.2 40.9-.3 59.2 2.8c-2.4-14.8-7.3-26.6-14.6-35.2c-10-11.7-25.6-17.7-46.2-17.8H227c-16.6 0-39 4.6-53.3 26.3l-34.4-23.6c19.2-29.1 50.3-45.1 87.8-45.1h.8c62.6 .4 99.9 39.5 103.7 107.7l-.2 .2zm-156 68.8c1.3 25.1 28.4 36.8 54.6 35.3c25.6-1.4 54.6-11.4 59.5-73.2c-13.2-2.9-27.8-4.4-43.4-4.4c-4.8 0-9.6 .1-14.4 .4c-42.9 2.4-57.2 23.2-56.2 41.8l-.1 .1z"></path>
        </svg>

    </a>

</div>
  • Content: 
    .uol-footer-social-media {

}

.uol-footer-social-media__item {
    display: inline-block;
    margin-right: $spacing-5;
    margin-bottom: $spacing-3;
    margin-left: -#{$spacing-1};
    text-decoration: none;
    padding: $spacing-1;

    &:last-of-type {
      margin-right: 0;
    }

    svg {

      path {
        fill: $color-warmgrey--light;
        transition: fill 0.3s ease;
      }
    }

    &:hover,
    &:focus {
      svg {
        path {
          fill: $color-brand--bright;
        }
      }
    }
  }
  • URL: /components/raw/uol-footer-social-media/_social-media.scss
  • Filesystem Path: src/library/02-components/footer-partials/social-media/_social-media.scss
  • Size: 522 Bytes 
{
  "social_links": [
    {
      "title": "YouTube",
      "label": "youtube",
      "url": "https://youtube.com/user/universityofleedsuk"
    },
    {
      "title": "Twitter",
      "label": "twitter",
      "url": "https://twitter.com/UniversityLeeds"
    },
    {
      "title": "Instagram",
      "label": "instagram",
      "url": "https://instagram.com/universityofleeds/?hl=en"
    },
    {
      "title": "LinkedIn",
      "label": "linkedin",
      "url": "https://www.linkedin.com/school/7244"
    },
    {
      "title": "Facebook",
      "label": "facebook",
      "url": "https://www.facebook.com/universityofleeds/"
    },
    {
      "title": "Medium",
      "label": "medium",
      "url": "https://medium.com/university-of-leeds"
    },
    {
      "title": "Weibo",
      "label": "weibo",
      "url": "https://www.weibo.com/leedsuniversityuk"
    },
    {
      "title": "TikTok",
      "label": "tiktok",
      "url": "https://www.tiktok.com/@universityofleeds"
    },
    {
      "title": "Threads",
      "label": "threads",
      "url": "https://www.threads.net/@universityofleeds"
    }
  ]
}