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
Switch component view

GitHub Repository

Install o-share

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

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-share@^8.0.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