Origami Frontend Components & Services

Demos: o-share

Horizontal

horizontal

<div data-o-component="o-share" class="o-share">
  <ul>
    <li class="o-share__action">
      <a
        class="o-share__icon o-share__icon--twitter"
        href="https://twitter.com/intent/tweet?url=http%3A//on.ft.com/1mUdgA2&amp;text=Pfizer%20says%20its%20AstraZeneca%20vow%20over%20big%20UK%20presence%20is%20binding&amp;related=ftcompanies&amp;via=FT"
        rel="noopener"
      >
        <span class="o-share__text">Twitter</span>
      </a>
    </li>
    <li class="o-share__action">
      <a
        class="o-share__icon o-share__icon--facebook"
        href="http://www.facebook.com/sharer.php?u=http%3A//on.ft.com/1mUdgA2"
        rel="noopener"
      >
        <span class="o-share__text">Facebook</span>
      </a>
    </li>
    <li class="o-share__action">
      <a
        class="o-share__icon o-share__icon--linkedin"
        href="https://www.linkedin.com/shareArticle?mini=true&amp;url=http%3A//on.ft.com/1mUdgA2&amp;title=Pfizer%20says%20its%20AstraZeneca%20vow%20over%20big%20UK%20presence%20is%20binding%2B%7C%2BFT%2Ecom%20%7C%20Pharmaceuticals&amp;summary=US%20drugs%20group%20vows%20to%20maintain%20big%20British%20presence&amp;source=Financial%20Times"
        rel="noopener"
      >
        <span class="o-share__text">LinkedIn</span>
      </a>
    </li>
    <li class="o-share__action">
      <a
        class="o-share__icon o-share__icon--whatsapp"
        target="_blank"
        href="whatsapp://send?text=Pfizer%20says%20its%20AstraZeneca%20vow%20over%20big%20UK%20presence%20is%20binding%20-%20http%3A//on.ft.com/1mUdgA2"
        data-trackable="whatsapp"
        rel="noopener"
      >
        <span class="o-share__text">Whatsapp</span>
      </a>
    </li>
    <li class="o-share__action">
      <a
        class="o-share__icon o-share__icon--pinterest"
        href="http://www.pinterest.com/pin/create/button/?url=http%3A//on.ft.com/1mUdgA2&amp;description=Pfizer%20says%20its%20AstraZeneca%20vow%20over%20big%20UK%20presence%20is%20binding"
        rel="noopener"
      >
        <span class="o-share__text">Pinterest</span>
      </a>
    </li>
    <li class="o-share__action">
      <button class="o-share__icon o-share__icon--mail">
        <span class="o-share__text">Mail</span>
      </button>
    </li>
    <li class="o-share__action">
      <a
        href="http%3A//on.ft.com/1mUdgA2"
        class="o-share__icon o-share__icon--link"
      >
        <span class="o-share__text">URL</span>
      </a>
    </li>
  </ul>
</div>

Small

small icons

<div data-o-component="o-share" class="o-share o-share--small">
  <ul>
    <li class="o-share__action">
      <a
        class="o-share__icon o-share__icon--twitter"
        href="https://twitter.com/intent/tweet?url=http%3A//on.ft.com/1mUdgA2&amp;text=Pfizer%20says%20its%20AstraZeneca%20vow%20over%20big%20UK%20presence%20is%20binding&amp;related=ftcompanies&amp;via=FT"
        rel="noopener"
      >
        <span class="o-share__text">Twitter</span>
      </a>
    </li>
    <li class="o-share__action">
      <a
        class="o-share__icon o-share__icon--facebook"
        href="http://www.facebook.com/sharer.php?u=http%3A//on.ft.com/1mUdgA2"
        rel="noopener"
      >
        <span class="o-share__text">Facebook</span>
      </a>
    </li>
    <li class="o-share__action">
      <a
        class="o-share__icon o-share__icon--linkedin"
        href="https://www.linkedin.com/shareArticle?mini=true&amp;url=http%3A//on.ft.com/1mUdgA2&amp;title=Pfizer%20says%20its%20AstraZeneca%20vow%20over%20big%20UK%20presence%20is%20binding%2B%7C%2BFT%2Ecom%20%7C%20Pharmaceuticals&amp;summary=US%20drugs%20group%20vows%20to%20maintain%20big%20British%20presence&amp;source=Financial%20Times"
        rel="noopener"
      >
        <span class="o-share__text">LinkedIn</span>
      </a>
    </li>
    <li class="o-share__action">
      <a
        class="o-share__icon o-share__icon--whatsapp"
        target="_blank"
        href="whatsapp://send?text=Pfizer%20says%20its%20AstraZeneca%20vow%20over%20big%20UK%20presence%20is%20binding%20-%20http%3A//on.ft.com/1mUdgA2"
        data-trackable="whatsapp"
        rel="noopener"
      >
        <span class="o-share__text">Whatsapp</span>
      </a>
    </li>
    <li class="o-share__action">
      <a
        class="o-share__icon o-share__icon--pinterest"
        href="http://www.pinterest.com/pin/create/button/?url=http%3A//on.ft.com/1mUdgA2&amp;description=Pfizer%20says%20its%20AstraZeneca%20vow%20over%20big%20UK%20presence%20is%20binding"
        rel="noopener"
      >
        <span class="o-share__text">Pinterest</span>
      </a>
    </li>
    <li class="o-share__action">
      <button class="o-share__icon o-share__icon--mail">
        <span class="o-share__text">Mail</span>
      </button>
    </li>
    <li class="o-share__action">
      <a
        href="http%3A//on.ft.com/1mUdgA2"
        class="o-share__icon o-share__icon--link"
      >
        <span class="o-share__text">URL</span>
      </a>
    </li>
  </ul>
</div>

Inverse

inverse share icons

<div data-o-component="o-share" class="o-share o-share--inverse">
  <ul>
    <li class="o-share__action">
      <a
        class="o-share__icon o-share__icon--twitter"
        href="https://twitter.com/intent/tweet?url=http%3A//on.ft.com/1mUdgA2&amp;text=Pfizer%20says%20its%20AstraZeneca%20vow%20over%20big%20UK%20presence%20is%20binding&amp;related=ftcompanies&amp;via=FT"
        rel="noopener"
      >
        <span class="o-share__text">Twitter</span>
      </a>
    </li>
    <li class="o-share__action">
      <a
        class="o-share__icon o-share__icon--facebook"
        href="http://www.facebook.com/sharer.php?u=http%3A//on.ft.com/1mUdgA2"
        rel="noopener"
      >
        <span class="o-share__text">Facebook</span>
      </a>
    </li>
    <li class="o-share__action">
      <a
        class="o-share__icon o-share__icon--linkedin"
        href="https://www.linkedin.com/shareArticle?mini=true&amp;url=http%3A//on.ft.com/1mUdgA2&amp;title=Pfizer%20says%20its%20AstraZeneca%20vow%20over%20big%20UK%20presence%20is%20binding%2B%7C%2BFT%2Ecom%20%7C%20Pharmaceuticals&amp;summary=US%20drugs%20group%20vows%20to%20maintain%20big%20British%20presence&amp;source=Financial%20Times"
        rel="noopener"
      >
        <span class="o-share__text">LinkedIn</span>
      </a>
    </li>
    <li class="o-share__action">
      <a
        class="o-share__icon o-share__icon--whatsapp"
        target="_blank"
        href="whatsapp://send?text=Pfizer%20says%20its%20AstraZeneca%20vow%20over%20big%20UK%20presence%20is%20binding%20-%20http%3A//on.ft.com/1mUdgA2"
        data-trackable="whatsapp"
        rel="noopener"
      >
        <span class="o-share__text">Whatsapp</span>
      </a>
    </li>
    <li class="o-share__action">
      <a
        class="o-share__icon o-share__icon--pinterest"
        href="http://www.pinterest.com/pin/create/button/?url=http%3A//on.ft.com/1mUdgA2&amp;description=Pfizer%20says%20its%20AstraZeneca%20vow%20over%20big%20UK%20presence%20is%20binding"
        rel="noopener"
      >
        <span class="o-share__text">Pinterest</span>
      </a>
    </li>
    <li class="o-share__action">
      <button class="o-share__icon o-share__icon--mail">
        <span class="o-share__text">Mail</span>
      </button>
    </li>
    <li class="o-share__action">
      <a
        href="http%3A//on.ft.com/1mUdgA2"
        class="o-share__icon o-share__icon--link"
      >
        <span class="o-share__text">URL</span>
      </a>
    </li>
  </ul>
</div>

Vertical

vertical

<div data-o-component="o-share" class="o-share o-share--vertical">
  <ul>
    <li class="o-share__action">
      <a
        class="o-share__icon o-share__icon--twitter"
        href="https://twitter.com/intent/tweet?url=http://on.ft.com/1mUdgA2&amp;text=Pfizer+says+its+AstraZeneca+vow+over+big+UK+presence+is+binding&amp;related=ftcompanies&amp;via=FT"
        rel="noopener"
      >
        <span class="o-share__text">Twitter</span>
      </a>
    </li>
    <li class="o-share__action">
      <a
        class="o-share__icon o-share__icon--facebook"
        href="http://www.facebook.com/sharer.php?u=http://on.ft.com/1mUdgA2"
        rel="noopener"
      >
        <span class="o-share__text">Facebook</span>
      </a>
    </li>
    <li class="o-share__action">
      <a
        class="o-share__icon o-share__icon--linkedin"
        href="https://www.linkedin.com/shareArticle?mini=true&amp;url=http://on.ft.com/1mUdgA2&amp;title=Pfizer+says+its+AstraZeneca+vow+over+big+UK+presence+is+binding%2B%7C%2BFT%2Ecom+%7C+Pharmaceuticals&amp;summary=US+drugs+group+vows+to+maintain+big+British+presence&amp;source=Financial%20Times"
        rel="noopener"
      >
        <span class="o-share__text">LinkedIn</span>
      </a>
    </li>
    <li class="o-share__action">
      <a
        class="o-share__icon o-share__icon--whatsapp"
        target="_blank"
        href="whatsapp://send?text=Pfizer+says+its+AstraZeneca+vow+over+big+UK+presence+is+binding%20-%20http://on.ft.com/1mUdgA2"
        data-trackable="whatsapp"
        rel="noopener"
      >
        <span class="o-share__text">Whatsapp</span>
      </a>
    </li>
    <li class="o-share__action">
      <a
        class="o-share__icon o-share__icon--pinterest"
        href="http://www.pinterest.com/pin/create/button/?url=http://on.ft.com/1mUdgA2&amp;description=Pfizer+says+its+AstraZeneca+vow+over+big+UK+presence+is+binding"
        rel="noopener"
      >
        <span class="o-share__text">Pinterest</span>
      </a>
    </li>
    <li class="o-share__action">
      <button class="o-share__icon o-share__icon--mail">
        <span class="o-share__text">Mail</span>
      </button>
    </li>
    <li class="o-share__action">
      <a
        href="http://on.ft.com/1mUdgA2"
        class="o-share__icon o-share__icon--link"
      >
        <span class="o-share__text">URL</span>
      </a>
    </li>
  </ul>
</div>

Custom Share

A custom share action may also be used alongside a form or with custom JavaScript behaviour attached, as shown with the last icon in this demo. Labels may be added to describe a custom share button.

<div data-o-component="o-share" class="o-share">
  <ul>
    <li class="o-share__action">
      <a
        class="o-share__icon o-share__icon--twitter"
        href="https://twitter.com/intent/tweet?url=http%3A//on.ft.com/1mUdgA2&amp;text=Pfizer%20says%20its%20AstraZeneca%20vow%20over%20big%20UK%20presence%20is%20binding&amp;related=ftcompanies&amp;via=FT"
        rel="noopener"
      >
        <span class="o-share__text">Twitter</span>
      </a>
    </li>
    <li class="o-share__action">
      <a
        class="o-share__icon o-share__icon--facebook"
        href="http://www.facebook.com/sharer.php?u=http%3A//on.ft.com/1mUdgA2"
        rel="noopener"
      >
        <span class="o-share__text">Facebook</span>
      </a>
    </li>
    <li class="o-share__action">
      <a
        class="o-share__icon o-share__icon--linkedin"
        href="https://www.linkedin.com/shareArticle?mini=true&amp;url=http%3A//on.ft.com/1mUdgA2&amp;title=Pfizer%20says%20its%20AstraZeneca%20vow%20over%20big%20UK%20presence%20is%20binding%2B%7C%2BFT%2Ecom%20%7C%20Pharmaceuticals&amp;summary=US%20drugs%20group%20vows%20to%20maintain%20big%20British%20presence&amp;source=Financial%20Times"
        rel="noopener"
      >
        <span class="o-share__text">LinkedIn</span>
      </a>
    </li>
    <li class="o-share__action o-share__action--labelled">
      <!-- demo only: forms with a submit button may be used for custom share features -->
      <form method="POST" action="#">
        <button type="submit" class="o-share__icon o-share__icon--share">
          <span class="o-share__text">Share</span>
        </button>
      </form>
    </li>
  </ul>
</div>
Status
active Origami v1
Switch component view

GitHub Repository

Install o-share

If using the Build Service, add o-share@^7.6.0 to your script and link tags.

If running a Manual Build, run npm install "o-share@^7.6.0".

Help & Support

o-share is maintained directly by the Origami team. If you have any questions about o-share or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com