University of Staffordshire Pattern Library

Social Links

No notes defined.

<aside class="social-links">
    <h3 class="h4">Connect with us</h3>
    <ul class="list--unstyled  list--inline">
        <li class="social-links--twitter">
            <a href="https://twitter.com/staffsuni">
                <i class="icon icon--twitter"></i>
                <span class="visually-hidden">Twitter: Staffordshire University</span>
            </a>
        </li>
        <li class="social-links--facebook">
            <a href="https://facebook.com/staffsuni">
                <i class="icon icon--facebook"></i>
                <span class="visually-hidden">Facebook: Staffordshire University</span>
            </a>
        </li>
        <li class="social-links--instagram">
            <a href="https://instagram.com/staffsuni">
                <i class="icon icon--instagram"></i>
                <span class="visually-hidden">Instagram: Staffordshire University</span>
            </a>
        </li>
        <li class="social-links--youtube">
            <a href="https://youtube.com/staffsuni">
                <i class="icon icon--youtube"></i>
                <span class="visually-hidden">YouTube: Staffordshire University</span>
            </a>
        </li>
        <li class="social-links--linkedin">
            <a href="https://www.linkedin.com/school/staffordshire-university/">
                <i class="icon icon--linkedin"></i>
                <span class="visually-hidden">LinkedIn: Staffordshire University</span>
            </a>
        </li>
        <li class="social-links--tiktok">
            <a href="https://www.tiktok.com/@staffsuni">
                <i class="icon icon--tiktok"></i>
                <span class="visually-hidden">TikTok: Staffordshire University</span>
            </a>
        </li>
    </ul>
</aside>
 
<aside class="social-links">
    <h3 class="h4">Connect with us</h3>
    <ul class="list--unstyled  list--inline">
        <li class="social-links--twitter">
            <a href="https://twitter.com/staffsuni">
                <i class="icon icon--twitter"></i>
                <span class="visually-hidden">Twitter: Staffordshire University</span>
            </a>
        </li>
        <li class="social-links--facebook">
            <a href="https://facebook.com/staffsuni">
                <i class="icon icon--facebook"></i>
                <span class="visually-hidden">Facebook: Staffordshire University</span>
            </a>
        </li>
        <li class="social-links--instagram">
            <a href="https://instagram.com/staffsuni">
                <i class="icon icon--instagram"></i>
                <span class="visually-hidden">Instagram: Staffordshire University</span>
            </a>
        </li>
        <li class="social-links--youtube">
            <a href="https://youtube.com/staffsuni">
                <i class="icon icon--youtube"></i>
                <span class="visually-hidden">YouTube: Staffordshire University</span>
            </a>
        </li>
        <li class="social-links--linkedin">
            <a href="https://www.linkedin.com/school/staffordshire-university/">
                <i class="icon icon--linkedin"></i>
                <span class="visually-hidden">LinkedIn: Staffordshire University</span>
            </a>
        </li>
        <li class="social-links--tiktok">
            <a href="https://www.tiktok.com/@staffsuni">
                <i class="icon icon--tiktok"></i>
                <span class="visually-hidden">TikTok: Staffordshire University</span>
            </a>
        </li>
    </ul>
</aside>
  • Content: 
    .social-links {
    & .icon {
        width: 2rem;
        height: 2rem;
    }

    & a {
        text-decoration: none;
        border-bottom: 0!important;
    }
}
  • URL: /components/raw/social-links/_social-links.scss
  • Filesystem Path: src\components\social-links\_social-links.scss
  • Size: 174 Bytes