Icons
Social sharing icons currently only contain twitter and facebook.
Source:
_shop18-styleguide.scss
, line 482
Example
Markup: components/social/social-sharing.twig
<div class="cr-article__social-links">
<div class="social-links-label">
<span>Share with:</span>
</div>
<div class="item-list">
<ul class="social-links">
<li>
<a href="http://twitter.com/home?status=http%3A%2F%2Flocalhost%3A8080%2Fweb%2Fnews-tv-and-events%2Fnews%2Fextra-article-3&amp;title=Extra+article+3" title="Twitter" class="social-link twitter-social-link social-link-popup SocialPopup-processed">
<svg class="icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#social-link-twitter"></use>
</svg>
</a>
</li>
<li>
<a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Flocalhost%3A8080%2Fweb%2Fnews-tv-and-events%2Fnews%2Fextra-article-3&amp;title=Extra+article+3" title="Facebook" class="social-link facebook-social-link social-link-popup SocialPopup-processed">
<svg class="icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#social-link-facebook"></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
Source:
_shop18-styleguide.scss
, line 488
Example
Markup: components/social/social-following.twig
<div class="footer__social-links bg--black">
<ul>
<li>
<a href="https://www.facebook.com/officialrednoseday" title="Facebook" target="_blank" class="icon__fb">
<svg class="icon">
<use xlink:href="#icon-facebook"></use>
</svg>
</a>
</li>
<li>
<a href="https://twitter.com/rednoseday" title="Twitter" target="_blank" class="icon__twitter">
<svg class="icon">
<use xlink:href="#icon-twitter"></use>
</svg>
</a>
</li>
<li>
<a href="https://www.instagram.com/rednoseday/" title="YouTube" target="_blank" class="icon__youtube">
<svg class="icon">
<use xlink:href="#icon-youtube"></use>
</svg>
</a>
</li>
<li>
<a href="https://plus.google.com/+rednoseday" title="Instagram" target="_blank" class="icon__instagram">
<svg class="icon">
<use xlink:href="#icon-instagram"></use>
</svg>
</a>
</li>
<li>
<a href="https://www.youtube.com/user/rednoseday" title="Google Plus" target="_blank" class="icon__googleplus">
<svg class="icon">
<use xlink:href="#icon-googleplus"></use>
</svg>
</a>
</li>
</ul>
</div>
Source:
_shop18-styleguide.scss
, line 494
Example
Markup: components/meta-icons/meta-icons.twig
<div id="block-metaiconsblock" class="contextual-region block block-cr-meta-icons">
<div class="meta-icons">
<a role="button" class="meta-icons__magnify has-tooltip active" title="Search" href="#">
<svg class="icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-magnify"></use>
</svg>
</a>
<a role="button" href="https://my.rednoseday.com/user/login" target="_blank" class="meta-icons__login has-tooltip" title="Log in to your Giving Page">
<svg class="icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-login"></use>
</svg>
</a>
<a role="button" class="meta-icons__esu-toggle has-tooltip" title="Sign up for emails" href="#">
<svg class="icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#envelope"></use>
</svg>
<span>Get the latest</span>
</a>
</div>
</div>
Source:
_shop18-styleguide.scss
, line 500