Cookies on

Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.

We would like to set additional cookies to remember your settings and understand how you use the site. This helps us to improve our services.

You have accepted all additional cookies. You have rejected all additional cookies. You can change your cookie preferences at any time.

Skip to main content

Share page

Use the share page component to allow users to share a page on Twitter or Facebook.

Example Share Page contents


{% from "components/share-page/_macro.njk" import onsSharePage %}

        "title": 'Share this post',
        "pageTitle": 'A page to share',
        "pageURL": '',
        "facebook": true,
        "twitter": true

Nunjucks macro options

titleTagstringfalseThe HTML heading tag for the title. Use to ensure the title has a correct semantic order on the page. Defaults to “h2”.
titlestringfalseHeading for the share component
pageTitlestringtrueThe <title> of the page to be shared
pageURLstringtrueThe absolute URL of the page to be shared
facebookbooleanfalseSet to “true” to display a Facebook icon and link to allow sharing to Facebook
twitterbooleanfalseSet to “true” to display a Twitter icon and link to allow sharing to Twitter
iconSizestringfalseIcon size can be set to match the size of the list item text as detailed in the typography type scale. Defaults to “xxl”.


<h2 class="ons-u-fs-r--b ons-u-mb-xs">Share this post</h2>
<ul class="ons-list ons-list--inline ons-list--bare ons-list--icons">
  <li class="ons-list__item">
    <span class="ons-list__prefix" aria-hidden="true">
      <svg class="ons-icon ons-icon--xxl" id="icon-facebook" viewBox="0 0 32 32" xmlns=""
        focusable="false" aria-hidden="true" role="img" title="ons-icon-facebook">
          d="M32,16.0986285 C32.0009185,7.5342974 25.337417,0.468462963 16.8372092,0.0203294753 C8.33700136,-0.427804013 0.97607758,5.89865855 0.0874346352,14.4161886 C-0.801208309,22.9337186 5.09355054,30.6602611 13.5009524,31.9979281 L13.5009524,20.7518951 L9.44,20.7518951 L9.44,16.0986285 L13.5009524,16.0986285 L13.5009524,12.549267 C13.5009524,8.5169471 15.8857143,6.28613892 19.5428571,6.28613892 C20.742535,6.30277426 21.9393895,6.40782423 23.1238095,6.60044523 L23.1238095,10.5637711 L21.1047619,10.5637711 C19.1161905,10.5637711 18.4990476,11.8056643 18.4990476,13.0782216 L18.4990476,16.0986285 L22.9409524,16.0986285 L22.2247619,20.7518951 L18.4990476,20.7518951 L18.4990476,31.9979281 C26.2735701,30.760956 31.9991507,24.0182672 32,16.0986285 L32,16.0986285 Z" />
      </svg></span><a href=""
      class="ons-list__link" target="_blank">Facebook<span class="ons-u-vh"> (opens in a new tab)</span></a>
  <li class="ons-list__item">
    <span class="ons-list__prefix" aria-hidden="true">
      <svg class="ons-icon ons-icon--xxl" id="icon-twitter" viewBox="0 0 90.01 90.01" xmlns=""
        focusable="false" aria-hidden="true" role="img" title="ons-icon-twitter">
        <polygon points="24.89,23.01 57.79,66.99 65.24,66.99 32.34,23.01" />
          d="M 45 0 L 45 0 C 20.147 0 0 20.147 0 45 v 0 c 0 24.853 20.147 45 45 45 h 0 c 24.853 0 45 -20.147 45 -45 v 0 C 90 20.147 69.853 0 45 0 z M 56.032 70.504 L 41.054 50.477 L 22.516 70.504 h -4.765 L 38.925 47.63 L 17.884 19.496 h 16.217 L 47.895 37.94 l 17.072 -18.444 h 4.765 L 50.024 40.788 l 22.225 29.716 H 56.032 z" />
      class="ons-list__link" target="_blank">Twitter<span class="ons-u-vh"> (opens in a new tab)</span></a>

When to use this component

Use the share page component on pages that users may want to share with other social media users. For example, on releases or news articles.

Help improve this page

Let us know how we could improve this page, or share your user research findings. Discuss the ‘Share page’ component on GitHub (opens in a new tab)