0.46.0
Changelog
Components
Social block
The social media icon block can be placed within the content area of a site, within the right side of a local/promo footer or within the content area of a profile widget.
<div class="c-social-block">
<ul class="c-social-block__list">
<li class="c-social-block__list-item"><a href="#0" class="ua-social-icon" title="Follow us on foursquare"><img src="/ua_theme/images/social-icons/foursquare.png" alt="Foursquare"></a></li>
<li class="c-social-block__list-item"><a href="#0" class="ua-social-icon" title="Follow us on twitter"><img src="/ua_theme/images/social-icons/twitter.png" alt="Twitter"></a></li>
<li class="c-social-block__list-item"><a href="#0" class="ua-social-icon" title="Follow us on pinterest"><img src="/ua_theme/images/social-icons/pinterest.png" alt="Pinterest"></a></li>
</ul>
</div>
Social Icons
Social media icons are seen below as an anchor wrapping an image. The HTML demo shows the path to the image source within the
ua_themedirectory. It also shows the modifier class to use for the small version of the icon image. This modifier class goes on the anchor and isua-social-icon--small.In the HTML demo, you must change the file name where is says
[modifier class], to whatever social media icon name seen in the list below. Also, to use the small version of the social media icon you will also need to ensure that the image file name has the following suffix--small.E.g. to use the small twitter icon you need the image path
/ua_theme/images/social-icons/twitter--small.png.Note: for icons that are interactive, but not necessarily a social media platform (such as the email icon) the title should read something appropriate to that form of interaction. E.g. 'email us' rather than 'follow us on email'.