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
How it looks (preview) (preview all)
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
With number of pages (preview)
<%= 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)
<%= 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)
<%= 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.
<%= 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)
<%= 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).
<%= 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 (preview)
<%= 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
},
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.
<%= 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
<%= 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
<%= 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
<%= 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
<%= 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
<%= 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.
<%= 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)
<%= 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)
<%= 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)
<%= 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)
<%= 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)
<%= render "govuk_publishing_components/components/attachment", {
attachment: {
title: "Architects Registration Board annual report 2021",
url: "https://arb.org.uk/wp-content/uploads/ARB-Annual-Report-and-Financial-Statement-2021-published.pdf",
type: "external"
}
} %>