Component

Attachment

Displays a link to download an attachment and metadata about the file

This component shows a link to a document that is attached to GOV.UK content along with a thumbnail and relevant file data.

It is intended to be rendered in Govspeak and as an attachment ‘preview’ in Content Publisher.

It is not as rich in features as the attachment rendering provided by Whitehall, it lacks support for multiple languages, CSV previews and publication fields

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

Department for Transport information asset register

CSV, 19.5 KB

How to call this component

<%= render "govuk_publishing_components/components/attachment", {
  attachment: {
    title: "Department for Transport information asset register",
    url: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/747661/department-for-transport-information-asset-register.csv",
    filename: "department-for-transport-information-asset-register.csv",
    content_type: "text/csv",
    file_size: 20000
  }
} %>

Accessibility acceptance criteria

The thumbnail image, and the link wrapping it, must not focusable or shown to screenreaders.

Links in the component must:

accept focus
be focusable with a keyboard
be usable with a keyboard
indicate when they have focus
change in appearance when touched (in the touch-down state)
change in appearance when hovered
be usable with touch
be usable with voice commands
have visible text
have meaningful text

Other examples

Standard options

This component uses the component wrapper helper. It accepts the following options and applies them to the parent element of the component. See the component wrapper helper documentation for more detail.

id - accepts a string for the element ID attribute
data_attributes - accepts a hash of data attributes
aria - accepts a hash of aria attributes
classes - accepts a space separated string of classes, these should not be used for styling and must be prefixed with js-
margin_bottom - accepts a number from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale
role - accepts a space separated string of roles
lang - accepts a language attribute value
open - accepts an open attribute value (true or false)
hidden - accepts an empty string, ‘hidden’, or ‘until-found’
tabindex - accepts an integer. The integer can also be passed as a string
dir - accepts ‘rtl’, ‘ltr’, or ‘auto’
type - accepts any valid type attribute e.g. ‘button’, ‘submit’, ‘text’
rel - accepts any valid rel attribute e.g. ‘nofollow’
target - accepts a valid target attribute e.g. ‘_blank’
title - accepts any string
draggable - accepts a draggable attribute value (“true” or “false”)

With number of pages (preview)

Department for Transport, temporary snow ploughs: guidance note

PDF, 19.5 KB, 7 pages

<%= render "govuk_publishing_components/components/attachment", {
  attachment: {
    title: "Department for Transport, temporary snow ploughs: guidance note",
    url: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/259634/temporary-snow-ploughs.pdf",
    filename: "temporary-snow-ploughs.pdf",
    content_type: "application/pdf",
    file_size: 20000,
    number_of_pages: 7
  }
} %>

Opendocument (preview)

BEIS Information Asset Register

ODS, 19.5 KB

This file is in an OpenDocument format

<%= render "govuk_publishing_components/components/attachment", {
  attachment: {
    title: "BEIS Information Asset Register",
    url: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/744083/BEIS_Information_Asset_Register_.ods",
    filename: "BEIS_Information_Asset_Register_.ods",
    content_type: "application/vnd.oasis.opendocument.spreadsheet",
    file_size: 20000
  }
} %>

Help text disabled (preview)

Attitudes in Iraq: June 2005 wave 1

Plain Text, 106 KB

<%= render "govuk_publishing_components/components/attachment", {
  attachment: {
    title: "Attitudes in Iraq: June 2005 wave 1",
    url: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/137879/20130110_Iraq_wave01.txt",
    filename: "20130110_Iraq_wave01.txt",
    content_type: "text/plain",
    file_size: 108515
  },
  hide_opendocument_metadata: true
} %>

Embedded in govspeak (preview)

This component can be embedded in Govspeak with the [Attachment:] code.

Some text.

BEIS Information Asset Register

ODS, 19.5 KB

This file is in an OpenDocument format

<%= render "govuk_publishing_components/components/govspeak" do %>
  <p>Some text.</p>
  <%= render "govuk_publishing_components/components/attachment", {
  attachment: {
    title: "BEIS Information Asset Register",
    url: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/744083/BEIS_Information_Asset_Register_.ods",
    filename: "BEIS_Information_Asset_Register_.ods",
    content_type: "application/vnd.oasis.opendocument.spreadsheet",
    file_size: 20000
  }
} %>
<% end %>

With contact email (preview)

Department for Transport information asset register

PDF, 19.5 KB

This file may not be suitable for users of assistive technology.

Request an accessible format.

If you use assistive technology (such as a screen reader) and need a version of this document in a more accessible format, please email defra.helpline@defra.gsi.gov.uk. Please tell us what format you need. It will help us if you say what assistive technology you use.

<%= render "govuk_publishing_components/components/attachment", {
  attachment: {
    title: "Department for Transport information asset register",
    url: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/747661/department-for-transport-information-asset-register.csv",
    filename: "department-for-transport-information-asset-register.csv",
    content_type: "application/pdf",
    file_size: 20000,
    alternative_format_contact_email: "defra.helpline@defra.gsi.gov.uk"
  }
} %>

With contact email and ga4 tracking (preview)

The attachment component can contain the details component as shown. The details component provides all of its own GA4 tracking, but in most situations also requires an index_section_count attribute to be passed manually. This can be done via the attachment component as shown (along with any other needed GA4 attributes).

Department for Transport information asset register

PDF, 19.5 KB

This file may not be suitable for users of assistive technology.

Request an accessible format.

<%= render "govuk_publishing_components/components/attachment", {
  attachment: {
    title: "Department for Transport information asset register",
    url: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/747661/department-for-transport-information-asset-register.csv",
    filename: "department-for-transport-information-asset-register.csv",
    content_type: "application/pdf",
    file_size: 20000,
    alternative_format_contact_email: "defra.helpline@defra.gsi.gov.uk"
  },
  details_ga4_attributes: {
    index_section_count: 4
  }
} %>

With data attributes on url (preview)

Department for Transport information asset register

PDF, 19.5 KB

<%= render "govuk_publishing_components/components/attachment", {
  attachment: {
    title: "Department for Transport information asset register",
    url: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/747661/department-for-transport-information-asset-register.csv",
    filename: "department-for-transport-information-asset-register.csv",
    content_type: "application/pdf",
    file_size: 20000
  },
  url_data_attributes: {
    gtm: "attachment-preview"
  }
} %>

With margin bottom (preview)

The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale. It defaults to no margin bottom.

Department for Transport information asset register

PDF, 19.5 KB

<%= render "govuk_publishing_components/components/attachment", {
  attachment: {
    title: "Department for Transport information asset register",
    url: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/747661/department-for-transport-information-asset-register.csv",
    filename: "department-for-transport-information-asset-register.csv",
    content_type: "application/pdf",
    file_size: 20000
  },
  margin_bottom: 9
} %>

Command paper numbered (preview)

Command paper, numbered

The government financial reporting review

Ref: ISBN 978-1-5286-1173-2, 2259, 67

PDF, 19.5 KB, 7 pages

Order a copy

<%= render "govuk_publishing_components/components/attachment", {
  attachment: {
    title: "The government financial reporting review",
    url: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/791567/the_government_financial_reporting_review_web.pdf",
    filename: "department-for-transport-information-asset-register.csv",
    content_type: "application/pdf",
    file_size: 20000,
    number_of_pages: 7,
    isbn: "978-1-5286-1173-2",
    unique_reference: "2259",
    command_paper_number: "67"
  }
} %>

Command paper unnumbered (preview)

Command paper, unnumbered

The government financial reporting review

Ref: ISBN 978-1-5286-1173-2, 2259

Unnumbered command paper

PDF, 19.5 KB, 7 pages

Order a copy

<%= render "govuk_publishing_components/components/attachment", {
  attachment: {
    title: "The government financial reporting review",
    url: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/791567/the_government_financial_reporting_review_web.pdf",
    filename: "the_government_financial_reporting_review_web.pdf",
    content_type: "application/pdf",
    file_size: 20000,
    number_of_pages: 7,
    isbn: "978-1-5286-1173-2",
    unique_reference: "2259",
    unnumbered_command_paper: true
  }
} %>

Act paper numbered (preview)

Act paper (House of Commons paper), numbered

Budget 2020

Ref: ISBN 978-1-913635-01-5, 2942, HC 121 2019-20

PDF, 19.5 KB, 12 pages

Order a copy

<%= render "govuk_publishing_components/components/attachment", {
  attachment: {
    title: "Budget 2020",
    url: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/871799/Budget_2020_Web_Accessible_Complete.pdf",
    filename: "Budget_2020_Web_Accessible_Complete.pdf",
    content_type: "application/pdf",
    file_size: 20000,
    number_of_pages: 12,
    isbn: "978-1-913635-01-5",
    unique_reference: "2942",
    hoc_paper_number: "121",
    parliamentary_session: "2019-20"
  }
} %>

Act paper unnumbered (preview)

Act paper (House of Commons paper), unnumbered

Budget 2020

Ref: ISBN 978-1-913635-01-5, 2942

Unnumbered act paper

PDF, 19.5 KB, 12 pages

Order a copy

<%= render "govuk_publishing_components/components/attachment", {
  attachment: {
    title: "Budget 2020",
    url: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/871799/Budget_2020_Web_Accessible_Complete.pdf",
    filename: "Budget_2020_Web_Accessible_Complete.pdf",
    content_type: "application/pdf",
    file_size: 20000,
    number_of_pages: 12,
    isbn: "978-1-913635-01-5",
    unique_reference: "2942",
    unnumbered_hoc_paper: true
  }
} %>

Hide order a copy (preview)

With ‘Order a copy’ hidden

Budget 2020

Ref: ISBN 978-1-913635-01-5, 2942

Unnumbered act paper

PDF, 19.5 KB, 12 pages

<%= render "govuk_publishing_components/components/attachment", {
  attachment: {
    title: "Budget 2020",
    url: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/871799/Budget_2020_Web_Accessible_Complete.pdf",
    filename: "Budget_2020_Web_Accessible_Complete.pdf",
    content_type: "application/pdf",
    file_size: 20000,
    number_of_pages: 12,
    isbn: "978-1-913635-01-5",
    unique_reference: "2942",
    unnumbered_hoc_paper: true
  },
  hide_order_copy_link: true
} %>

With custom heading level (preview)

Default is h2.

Department for Transport information asset register

CSV, 19.5 KB

<%= render "govuk_publishing_components/components/attachment", {
  heading_level: 3,
  attachment: {
    title: "Department for Transport information asset register",
    url: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/747661/department-for-transport-information-asset-register.csv",
    filename: "department-for-transport-information-asset-register.csv",
    content_type: "text/csv",
    file_size: 20000
  }
} %>

With custom thumbnail (preview)

Department for Transport, temporary snow ploughs: guidance note

PDF, 19.5 KB

<%= render "govuk_publishing_components/components/attachment", {
  attachment: {
    title: "Department for Transport, temporary snow ploughs: guidance note",
    url: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/259634/temporary-snow-ploughs.pdf",
    filename: "temporary-snow-ploughs.pdf",
    content_type: "application/pdf",
    file_size: 20000,
    thumbnail_url: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/791567/thumbnail_the_government_financial_reporting_review_web.pdf.png"
  }
} %>

Pdf attachment (preview)

Department for Transport, temporary snow ploughs: guidance note

PDF, 19.5 KB

<%= render "govuk_publishing_components/components/attachment", {
  attachment: {
    title: "Department for Transport, temporary snow ploughs: guidance note",
    url: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/259634/temporary-snow-ploughs.pdf",
    filename: "temporary-snow-ploughs.pdf",
    content_type: "application/pdf",
    file_size: 20000
  }
} %>

With preview link (preview)

Consular data: February 2018

CSV, 50.3 KB

View online

<%= render "govuk_publishing_components/components/attachment", {
  attachment: {
    title: "Consular data: February 2018",
    url: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/687542/February_2018_Consular_MI.csv",
    filename: "February_2018_Consular_MI.csv",
    content_type: "text/csv",
    file_size: 51496,
    preview_url: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/687542/February_2018_Consular_MI.csv/preview"
  }
} %>

Html attachment (preview)

Smart meters: unlocking the future

HTML

<%= render "govuk_publishing_components/components/attachment", {
  attachment: {
    title: "Smart meters: unlocking the future",
    url: "https://www.gov.uk/government/publications/smart-meters-unlocking-the-future/smart-meters-unlocking-the-future",
    type: "html"
  }
} %>

External attachment (preview)

The word break helper (govuk-text-break-word) is used from the design system to forcibly break URLs across multiple lines when they wouldn’t otherwise fit.

Architects Registration Board annual report 2021

https://arb.org.uk/wpcontent/uploads/ARBAnnualReportandFinancialStatement2021published.pdf

<%= render "govuk_publishing_components/components/attachment", {
  attachment: {
    title: "Architects Registration Board annual report 2021",
    url: "https://arb.org.uk/wpcontent/uploads/ARBAnnualReportandFinancialStatement2021published.pdf",
    type: "external"
  }
} %>