1. Government Frontend Component Guide
  2. Attachment

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 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

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)

BEIS Information Asset Register

<%= 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.

BEIS Information Asset Register

<%= 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

Request a different format
If you use assistive technology 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 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"
  }
} %>