Component

Attachment link

A link to a file with metadata of the file contents

This component provides a means to show a link to an attachment with some relevant file data.

It is expected to be embedded inside an element that provides text styles (such as .govuk-body) so does not provide its own text styling.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

Temporary snow ploughs: guidance note (PDF, 19.5 KB, 1 page)

How to call this component

<%= render "govuk_publishing_components/components/attachment_link", {
  attachment: {
    title: "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: 1
  }
} %>

Accessibility acceptance criteria

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

Embedded in govuk body (preview)

Temporary snow ploughs: guidance note (PDF, 19.5 KB, 1 page) 

<p class="govuk-body">
  <%= render "govuk_publishing_components/components/attachment_link", {
  attachment: {
    title: "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: 1
  }
} %>
</p>

Embedded in govspeak (preview)

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

Some introductory information about Temporary snow ploughs: guidance note (PDF, 19.5 KB, 1 page) .

<%= render "govuk_publishing_components/components/govspeak" do %>
  <p>Some introductory information about <%= render "govuk_publishing_components/components/attachment_link", {
  attachment: {
    title: "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: 1
  }
} %>.</p>
<% end %>

With target blank (preview) 

<%= render "govuk_publishing_components/components/attachment_link", {
  attachment: {
    title: "Temporary snow ploughs: guidance note",
    url: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/259634/temporary-snow-ploughs.pdf"
  },
  target: "_blank"
} %>

With data attributes (preview) 

<%= render "govuk_publishing_components/components/attachment_link", {
  attachment: {
    title: "Temporary snow ploughs: guidance note",
    url: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/259634/temporary-snow-ploughs.pdf"
  },
  data_attributes: {
    gtm: "attachment-preview"
  }
} %>