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)

Temporary snow ploughs: guidance note

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

Temporary snow ploughs: guidance note

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