Social bar

The social bar is designed to allow users to share something of interest via social media.

Default

The social bar shares links to Facebook, Twitter, LinkedIn and email. 

<div class="nsw-container">
  <section aria-label="Page tools">
    <ul class="nsw-socials">
      <li class="nsw-socials__item">
        <a class="nsw-socials__link js-share-this" href="https://facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.service.nsw.gov.au" target="_blank" rel="noopener">
          <svg class="nsw-icon nsw-socials__icon" focusable="false" aria-hidden="true">
            <use xlink:href="#facebook"></use>
          </svg>
          <span class="sr-only">Facebook</span>
        </a>
      </li>
      <li class="nsw-socials__item">
        <a class="nsw-socials__link js-share-this" href="https://www.linkedin.com/shareArticle?mini=true&amp;url=https%3A%2F%2Fwww.service.nsw.gov.au" target="_blank" rel="noopener">
          <svg class="nsw-icon nsw-socials__icon" focusable="false" aria-hidden="true">
            <use xlink:href="#linkedin"></use>
          </svg>
          <span class="sr-only">LinkedIn</span>
        </a>
      </li>
      <li class="nsw-socials__item">
        <a class="nsw-socials__link js-share-this" href="https://twitter.com/intent/tweet/?url=https%3A%2F%2Fwww.service.nsw.gov.au" target="_blank" rel="noopener">
          <svg class="nsw-icon nsw-socials__icon" focusable="false" aria-hidden="true">
            <use xlink:href="#twitter"></use>
          </svg>
          <span class="sr-only">Twitter</span>
        </a>
      </li>
      <li class="nsw-socials__item">
        <a class="nsw-socials__link " href="mailto:?body=https%3A%2F%2Fwww.service.nsw.gov.au" target="_self" rel="noopener">
          <svg class="nsw-icon nsw-socials__icon" focusable="false" aria-hidden="true">
            <use xlink:href="#email"></use>
          </svg>
          <span class="sr-only">Email</span>
        </a>
      </li>
    </ul>
  </section>
</div>

 

Copy

The social bar encourages users to share links to pages via 3 popular social mediums and email.

Easily recognisable icons are used to show users how they can share the page they are currently on.

Use to encourage users to share links to pages that may be of interest to their social network.

Ensure URLs are shareable and will return the user to the relevant page.

If possible, make URLs human readable.