Open or Close the menu

Asbestos in NSW

  • 0Overview
  • 1Typography
  • 2Icons
  • 3Forms
  • 4Global components
  • 5Content components
  • 6Grouped components
  • 7Templates

4.5 Social links View in a new window

Example
  • Facebook
  • LinkedIn
  • Twitter
  • Email
Markup
{% set data = breadcrumb|default({
  "shareUrl": "https://www.service.nsw.gov.au",
  "svgUrl":"."
}) %}

<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={{data.ShareUrl}}" target="_blank" rel="noopener">
        <img src="{{data.svgUrl}}/images/facebook.svg" class="nsw-icon nsw-socials__icon" focusable="false" aria-hidden="true">
        <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={{data.ShareUrl}}" target="_blank" rel="noopener">
        <img src="{{data.svgUrl}}/images/linkedin.svg" class="nsw-icon nsw-socials__icon" focusable="false" aria-hidden="true">
        <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={{data.ShareUrl}}" target="_blank" rel="noopener">
        <img src="{{data.svgUrl}}/images/twitter.svg" class="nsw-icon nsw-socials__icon" focusable="false" aria-hidden="true">
        <span class="sr-only">Twitter</span>
      </a>
    </li>
    <li class="nsw-socials__item">
      <a class="nsw-socials__link " href="mailto:?body={{data.ShareUrl}}" target="_self" rel="noopener">
      <img src="{{data.svgUrl}}/images/email.svg" class="nsw-icon nsw-socials__icon" focusable="false" aria-hidden="true">
        <span class="sr-only">Email</span>
      </a>
    </li>
  </ul>
</section>