Skip links and keyboard navigation

SWE components

Print

On this page

Overview

Content pages can be required to be printed or saved as a PDF. The print component makes it easy for users to do this.

By default the SWE components are styled with print styles in mind to help optimise the page output for print. When printed, the page will:

  • hide elements such as navigation, header and footer
  • expanding content to use 100% of the available width
  • expanding conditionally hidden content with appropriate headings (e.g. accordions, tabbed content, progressively disclosed form sections)
  • display the full URL on content links
  • displaying asides after the main content.

Default

The default usage is for printing standard page content. The recommended positioning is at the top right of the content column.

View example in Storybook

Code

<a class="print-content-link" href="#"><span class="fa fa-print"></span> Print</a>

The print entire guide variation fetches the content of all the guides linked pages. For example, in the below list, it will fetch and output the content of 'Your responsibilities', 'Moving wildlife' and 'Species list' pages.

View example in Storybook

Code

<section class="qg-print-guide" id="toc">
  <h3>Recreational wildlife licence</h3>
  <p>In this guide:</p>
  <ol>
    <li class=""><a href="#">Your responsibilities</a></li>
    <li class="active"><a href="#">Moving wildlife</a></li>
    <li class=""><a href="#">Species list</a></li>
  </ol>
  <br>
  <p><a id="printguide" href="https://www.qld.gov.au/_qgdesigns/content/guide-printing?root=60580"><span class="fa fa-print"></span> Print entire guide</a></p>
</section>
Last updated:
28 June 2024