Icons

Social sharing icons currently only contain twitter and facebook.

Source: _cr19-styleguide.scss, line 626
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;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;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: _cr19-styleguide.scss, line 632
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: _cr19-styleguide.scss, line 638
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: _cr19-styleguide.scss, line 644
Example

@ComicRelief

Some other copy can go here to illustrate alignment etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc

@ComicRelief

Some other copy can go here to illustrate alignment etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc

@ComicRelief

Some other copy can go here to illustrate alignment etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc

@ComicRelief

Some other copy can go here to illustrate alignment etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc

Markup: components/inline-social-icons/inline-social-icons.twig
<div class="bg--coral" style="padding: 10px;">
  <p class="inline-icon inline-icon--ig-dark">@ComicRelief</p>
  <p>Some other copy can go here to illustrate alignment etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc</p>
</div>


<div class="bg--dark-coral" style="padding: 10px;">
  <p class="inline-icon inline-icon--ig-light">@ComicRelief</p>
  <p>Some other copy can go here to illustrate alignment etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc</p>
</div>

<div class="bg--coral" style="padding: 10px;">
  <p class="inline-icon inline-icon--tw-dark">@ComicRelief</p>
  <p>Some other copy can go here to illustrate alignment etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc</p>
</div>


<div class="bg--dark-coral" style="padding: 10px;">
  <p class="inline-icon inline-icon--tw-light">@ComicRelief</p>
  <p>Some other copy can go here to illustrate alignment etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc</p>
</div>
Source: _cr19-styleguide.scss, line 650