Skip to contentSkip to footer
Give feedbackv3.0.2

Content toolbar

The content toolbars sandwich the content of the page, sitting below the page heading and above the footer.

The top toolbar contains important page information;

  • Extent switcher
  • Print button
  • Reference button (to open the reference window)
  • Extent, this is an admin only function that shows what extent the page was written for
  • Reviewed, who/when the article was last reviewed
  • Owner, who the page owner is

The bottom toolbar is reserved for sharing functionality. LinkedIn should only be used on blogs, while Whatsapp and Messenger should only appear for mobiles.

Each toolbar item should include a data-track attribute to help identify if these sharing options are beneficial and supporting user's needs.

This advice is for ExtentReviewedOwnerWord template
<div class="title__subheading">
    This advice is for <button class="btn-secondary btn-small" id="showSimpleModal" type="button">
    <span class="screenreader">This advice is for</span>England</button>
    <button class="toolbar-button a-social-print" data-track="Print" href="javascript:window.print();">Print</button>
    <button class="toolbar-button a-social-references" data-track="References" href="#!">References</button>
    <a class="toolbar-button a-social-word" href="https://www.citizensadvice.org.uk/Static/word/word-template-ew.dot">Word</button>
    <span class="info-extent">Extent</span>
    <span class="info-reviewed">Reviewed</span>
    <span class="info-owner">Owner</span>
</div>
<div class="title__subheading--footer">
    <p>Share this page. <a>Find out more about sharing.</a></p>
    <a class="a-social-whatsapp show-mobile" href="javascript:window.location='whatsapp://send?text='+encodeURIComponent(location.href);" data-track="Whatsapp">Whatsapp</a>
    <a class="a-social-messenger show-mobile" href="javascript:window.location='fb-messenger://share?link='+encodeURIComponent(location.href);" data-track="Facebook Messenger">Messenger</a>
    <a class="a-social-twitter" data-track="Twitter" href="https://twitter.com/share?url=" rel="external">Twitter</a>
    <a class="a-social-facebook" data-track="Facebook" href="https://www.facebook.com/sharer/sharer.php?u=" rel="external">Facebook</a>
    <a class="a-social-linkedin" target="_blank" data-track="LinkedIn">LinkedIn</a>
    <button class="a-social-email" data-track="Email page" href="javascript:emailCurrentPage()">Email</button>
    <button class="a-social-copy">Copy link<div class="copied">Copied!</div></button>
</div>