Social media
Overview
Use this component to consistently display links to the social media services BAS uses.
Where possible, the BAS Style Kit uses officially provided assets for social media services, such as logos.
All brand assets trademarks of their respective owners, and subject to their respective licensing restrictions.
You must ensure that where you use these assets you comply with these restrictions.
Supported services
Colours and Icons are defined for each supported service.
| Social Media Service | Social Media Service Class |
|---|---|
.bsk-twitter |
|
.bsk-facebook |
|
| YouTube | .bsk-youtube |
| RSS | .bsk-rss |
Get in touch if you require other services.
States
Static symbols
Use the .bsk-social-media-static class with the relevant class for each service, containing the relevant
icon for each service.
<!-- Twitter -->
<div class="bsk-social-media-static bsk-twitter"><i class="fab fa-fw fa-3x fa-twitter-square"></i><span class="bsk-visually-hidden">Follow us on Twitter</span></div>
<!-- Facebook -->
<div class="bsk-social-media-static bsk-facebook"><i class="fab fa-fw fa-3x fa-facebook-square"></i><span class="bsk-visually-hidden">Follow us on Facebook</span></div>
<!-- YouTube -->
<div class="bsk-social-media-static bsk-youtube"><i class="fab fa-fw fa-3x fa-youtube-square"></i><span class="bsk-visually-hidden">Subscribe to us on YouTube</span></div>
<!-- RSS -->
<div class="bsk-social-media-static bsk-rss"><i class="fas fa-fw fa-3x fa-rss-square"></i><span class="bsk-visually-hidden">Follow us with RSS</span></div>Linked symbols
Use the .bsk-social-media-link class with the relevant class for each service, containing the relevant
icon for each service.
<!-- Twitter -->
<div><a href="#" class="bsk-social-media-link bsk-twitter"><i class="fab fa-fw fa-3x fa-twitter-square"></i><span class="bsk-visually-hidden">Follow us on Twitter</span></a></div>
<!-- Facebook -->
<div><a href="#" class="bsk-social-media-link bsk-facebook"><i class="fab fa-fw fa-3x fa-facebook-square"></i><span class="bsk-visually-hidden">Follow us on Facebook</span></a></div>
<!-- YouTube -->
<div><a href="#" class="bsk-social-media-link bsk-youtube"><i class="fab fa-fw fa-3x fa-youtube-square"></i><span class="bsk-visually-hidden">Subscribe to us on YouTube</span></a></div>
<!-- RSS -->
<div><a href="#" class="bsk-social-media-link bsk-rss"><i class="fas fa-fw fa-3x fa-rss-square"></i><span class="bsk-visually-hidden">Follow us with RSS</span></a></div>Layouts
List of symbols
Use the .bsk-social-media-list class and the .bsk-list-inline-item class with a inline list
to display multiple static or
linked social media symbols next to each other.
<ul class="bsk-list-inline bsk-social-media-list">
<li class="bsk-list-inline-item"><a href="#" class="bsk-social-media-link bsk-twitter"><i class="fab fa-fw fa-3x fa-twitter-square"></i><span class="bsk-visually-hidden">Follow us on Twitter</span></a></li>
<li class="bsk-list-inline-item"><a href="#" class="bsk-social-media-link bsk-facebook"><i class="fab fa-fw fa-3x fa-facebook-square"></i><span class="bsk-visually-hidden">Follow us on Facebook</span></a></li>
<li class="bsk-list-inline-item"><a href="#" class="bsk-social-media-link bsk-youtube"><i class="fab fa-fw fa-3x fa-youtube-square"></i><span class="bsk-visually-hidden">Subscribe to us on YouTube</span></a></li>
<li class="bsk-list-inline-item"><a href="#" class="bsk-social-media-link bsk-rss"><i class="fas fa-fw fa-3x fa-rss-square"></i><span class="bsk-visually-hidden">Follow us with RSS</span></a></li>
</ul>