Content presentation - Document preview

This component is used to depict a document.

Copy code

<div class="hs2-u-display-flex ">
  <div class="hs2-u-border-2 hs2-u-border-secondary">

    <div class="hs2-document-preview__image" aria-hidden="true">
      <a class="hs2-document-preview__image-border" href="#" tabindex="-1">

        <img class="w-inherit" srcset="/assets/images/thumbnail_23-05-10_-_DL+IR_HS2_Lorry_Routes_at_Waste_Lane__Solihull.png 1x, /assets/images/thumbnail_23-05-10_-_DL+IR_HS2_Lorry_Routes_at_Waste_Lane__Solihull.png 2x" src="/assets/images/thumbnail_23-05-10_-_DL+IR_HS2_Lorry_Routes_at_Waste_Lane__Solihull.png" alt="" loading="lazy">

      </a>
    </div>

  </div>
  <div class="hs2-u-padding-top-2">
    <h3 class="hs2-heading-s hs2-u-margin-bottom-0">Recovered appeal: HS2 lorry routes at Waste Lane, Solihull (ref: APP/HS2/19 - 10 May 2023)</h3>
    <p class="hs2-document-list__item-attribute">Owner: High Speed Two
    </p>

    <p class="hs2-body">
      <span class="">Decision letter for a recovered appeal under Schedule 17 to the High Speed Rail (London - West Midlands) Act 2017.</span>
    </p>

    <a href="#">View full document</a>
  </div>
</div>

Nunjucks

Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for default document preview
Name	Type	Required	Description
Name document	Type object	Required true	Description The document to be previewed
Name document{}.thumbnail	Type object	Required true	Description An object containing path and filename attributes for the thumbnail image. Renders a placeholder instead if set to true
Name thumbnail{}.smallSrc	Type string	Required true	Description Path to the standard version of the image
Name thumbnail{}.largeSrc	Type string	Required true	Description Path to the higher resolution version of the image
Name document{}.documentUrl	Type string	Required true	Description Url of the document
Name document{}.name	Type string	Required true	Description Name / title of the document
Name document{}.owner	Type string	Required true	Description Owner of the document
Name document{}.description	Type string	Required true	Description Description of the document
Name classes	Type string	Required false	Description Classes to be applied to the parent div

Copy code

{% from 'document-preview/macro.njk' import documentPreview %}

{{ documentPreview({
  "document": {
    "name": "Recovered appeal: HS2 lorry routes at Waste Lane, Solihull (ref: APP/HS2/19 - 10 May 2023)",
    "owner": "High Speed Two",
    "description": "Decision letter for a recovered appeal under Schedule 17 to the High Speed Rail (London - West Midlands) Act 2017.",
    "documentUrl": "#",
    "thumbnail": {
      "smallSrc": '/assets/images/thumbnail_23-05-10_-_DL+IR_HS2_Lorry_Routes_at_Waste_Lane__Solihull.png',
      "largeSrc": '/assets/images/thumbnail_23-05-10_-_DL+IR_HS2_Lorry_Routes_at_Waste_Lane__Solihull.png'
    }
  }
}) }}

How to use this component

Thumbnail images and placeholders

You will need to set two versions of the thumbnail image, one for standard screens and one double-sized image for higher resolution screens.

Set a folder path for both small and large image sources using the smallSrc and largeSrc parameters.

Thumbnail images are considered decorative because they do not convey important information, so are hidden from screen readers by using an empty alt tag.