Skip to main content
This website uses cookies to help us make it better - find out more
live This is a new website – your feedback will help us to improve it.

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
Twitter .bsk-twitter
Facebook .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.

Follow us on Twitter
Follow us on Facebook
Subscribe to us on YouTube
Follow us with RSS
<!-- Twitter -->
<div class="bsk-social-media-static bsk-twitter"><i class="fab fa-fw fa-3x fa-twitter-square"></i><span class="bsk-sr-only">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-sr-only">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-sr-only">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-sr-only">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.

Follow us on Twitter
Follow us on Facebook
Subscribe to us on YouTube
Follow us with RSS
<!-- 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-sr-only">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-sr-only">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-sr-only">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-sr-only">Follow us with RSS</span></a></div>

Layouts

List of symbols

Use the .bsk-social-media-list 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><a href="#" class="bsk-social-media-link bsk-twitter"><i class="fab fa-fw fa-3x fa-twitter-square"></i><span class="bsk-sr-only">Follow us on Twitter</span></a></li>
  <li><a href="#" class="bsk-social-media-link bsk-facebook"><i class="fab fa-fw fa-3x fa-facebook-square"></i><span class="bsk-sr-only">Follow us on Facebook</span></a></li>
  <li><a href="#" class="bsk-social-media-link bsk-youtube"><i class="fab fa-fw fa-3x fa-youtube-square"></i><span class="bsk-sr-only">Subscribe to us on YouTube</span></a></li>
  <li><a href="#" class="bsk-social-media-link bsk-rss"><i class="fas fa-fw fa-3x fa-rss-square"></i><span class="bsk-sr-only">Follow us with RSS</span></a></li>
</ul>