Component

Media with actions

Takes an arbitrary block and displays actions below it

This component embeds the govuk_publishing_components attachment component with reduced data. Links to open the file use target="_blank" to open in a new tab.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

Imagine this is a preview of the attachment.

How to call this component

<%= render "components/media_with_actions", {
  actions: [
    sanitize("<a class=\"govuk-link\" href=\"#\">Insert attachment</a>"),
    sanitize("<a class=\"govuk-link\" href=\"#\">Preview</a>"),
    sanitize("<a class=\"govuk-link\" href=\"#\">Edit file</a>"),
    sanitize("<a class=\"govuk-link\" href=\"#\">Delete attachment</a>")
  ]
} do %>
  Imagine this is a preview of the attachment.<% end %>

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