Attachment

When to use this component

Use the attachment component to display file attachments with metadata.

When to not use this component

Avoid using the attachment component for inline content (e.g., code snippets, images), simple links without metadata, non-file media, or in space-constrained layouts where the thumbnail and padding may cause overflow or clutter.

HTML examples

Select the appropriate example from this page and directly integrate the HTML into your web template. You can customise these examples to align with your specific requirements, as indicated below. Refer to the layouts section for further guidance on structuring your web template.

If the component requires submission to a CRM field, ensure to replace the placeholder schema-name text in the HTML example with the actual target field schema name. Retain any prefixed or suffixed text related to the schema name. For instance, if the id attribute reads schema-name-hint in the example, ensure the replacement maintains the -hint suffix (e.g. dfe_field-hint).

This step is crucial for allowing the CRM helper framework to validate and submit data to CRM.

Basic attachment with thumbnail, title, and metadata

This example shows a simple attachment with a PDF icon, a title, and metadata (file type and size).

Basic attachment with thumbnail, title, and metadata

Example
HTML
Web Template

Annual Report 2024

PDF, 1.2 MB

<div class="dfe-attachment">
  <div class="dfe-attachment__thumbnail">
    <a class="govuk-link" target="_self" tabindex="-1" aria-hidden="true" href="/path/to/file.pdf">
      <svg class="dfe-attachment__thumbnail-image">
        <path d="M12,59h9v9h-9v-9ZM30,77v9h39v-9H30ZM30,104h57v-9H30v9ZM30,122h48v-9H30v9ZM12,86h9v-9h-9v9ZM12,122h9v-9h-9v9ZM12,104h9v-9h-9v9ZM30,68h57v-9H30v9ZM35.2,21c-.3-.2-.6-.4-1-.5s-.8-.2-1.3-.2h-2.6v5.5h2.6c.5,0,1,0,1.3-.2s.7-.3,1-.5c.3-.2.5-.5.7-.8s.2-.7.2-1.1h0c0-.5,0-.9-.2-1.2-.2-.3-.4-.6-.7-.8h0ZM52.4,21.9c-.4-.5-1-.9-1.6-1.1-.7-.3-1.5-.4-2.4-.4h-2.7v11.5h2.7c.9,0,1.7-.1,2.4-.4s1.2-.7,1.6-1.1c.4-.5.7-1.1.9-1.7.2-.7.3-1.4.3-2.1v-.7c0-.8,0-1.5-.3-2.1-.2-.6-.5-1.2-.9-1.7h0ZM87,12v27H12V12h75ZM39.8,23c0-.9-.1-1.6-.4-2.4-.3-.7-.7-1.4-1.2-1.9-.5-.5-1.2-1-1.9-1.2-.8-.3-1.6-.5-2.5-.5h-7.2v17.9h3.6v-6h3.2c.9,0,1.8-.1,2.6-.5.8-.3,1.4-.7,2-1.2.5-.5,1-1.2,1.3-1.9.3-.7.5-1.5.5-2.4h0ZM57.4,26c0-1.3-.2-2.6-.5-3.7s-.9-2-1.6-2.8c-.7-.8-1.6-1.4-2.7-1.8-1.1-.4-2.3-.6-3.8-.6h-6.6v17.9h6.6c1.5,0,2.7-.2,3.8-.6,1.1-.4,2-1,2.7-1.8.7-.8,1.3-1.7,1.6-2.8.4-1.1.5-2.3.5-3.7h0ZM72.4,17.1h-12.1v17.9h3.6v-7.5h7.8v-3.3h-7.8v-3.8h8.4s0-3.3,0-3.3Z"></path>
      </svg>
    </a>
  </div>
  <div class="dfe-attachment__details">
    <h3 class="dfe-attachment__title">
      <a href="/path/to/document.pdf" class="dfe-attachment__link govuk-link">
        Annual Report 2024
      </a>
    </h3>
    <p class="dfe-attachment__metadata">
      <abbr title="Portable Document Format" class="dfe-attachment__abbr">PDF</abbr>,
      <span class="dfe-attachment__attribute">1.2 MB</span>
    </p>
  </div>
</div>

Warning This is a basic web template page layout with a logged-in user check and does not include additional liquid items which are commonplace on a CRM Portal.

{% extends 'DfE/Layouts/2ColumnWideLeft' %}

{% block main %}

{% unless user %}
  <script>
    window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
  </script>
{% endunless %}

<div class="dfe-attachment">
  <div class="dfe-attachment__thumbnail">
    <a class="govuk-link" target="_self" tabindex="-1" aria-hidden="true" href="/path/to/file.pdf">
      <svg class="dfe-attachment__thumbnail-image">
        <path d="M12,59h9v9h-9v-9ZM30,77v9h39v-9H30ZM30,104h57v-9H30v9ZM30,122h48v-9H30v9ZM12,86h9v-9h-9v9ZM12,122h9v-9h-9v9ZM12,104h9v-9h-9v9ZM30,68h57v-9H30v9ZM35.2,21c-.3-.2-.6-.4-1-.5s-.8-.2-1.3-.2h-2.6v5.5h2.6c.5,0,1,0,1.3-.2s.7-.3,1-.5c.3-.2.5-.5.7-.8s.2-.7.2-1.1h0c0-.5,0-.9-.2-1.2-.2-.3-.4-.6-.7-.8h0ZM52.4,21.9c-.4-.5-1-.9-1.6-1.1-.7-.3-1.5-.4-2.4-.4h-2.7v11.5h2.7c.9,0,1.7-.1,2.4-.4s1.2-.7,1.6-1.1c.4-.5.7-1.1.9-1.7.2-.7.3-1.4.3-2.1v-.7c0-.8,0-1.5-.3-2.1-.2-.6-.5-1.2-.9-1.7h0ZM87,12v27H12V12h75ZM39.8,23c0-.9-.1-1.6-.4-2.4-.3-.7-.7-1.4-1.2-1.9-.5-.5-1.2-1-1.9-1.2-.8-.3-1.6-.5-2.5-.5h-7.2v17.9h3.6v-6h3.2c.9,0,1.8-.1,2.6-.5.8-.3,1.4-.7,2-1.2.5-.5,1-1.2,1.3-1.9.3-.7.5-1.5.5-2.4h0ZM57.4,26c0-1.3-.2-2.6-.5-3.7s-.9-2-1.6-2.8c-.7-.8-1.6-1.4-2.7-1.8-1.1-.4-2.3-.6-3.8-.6h-6.6v17.9h6.6c1.5,0,2.7-.2,3.8-.6,1.1-.4,2-1,2.7-1.8.7-.8,1.3-1.7,1.6-2.8.4-1.1.5-2.3.5-3.7h0ZM72.4,17.1h-12.1v17.9h3.6v-7.5h7.8v-3.3h-7.8v-3.8h8.4s0-3.3,0-3.3Z"></path>
      </svg>
    </a>
  </div>
  <div class="dfe-attachment__details">
    <h3 class="dfe-attachment__title">
      <a href="/path/to/document.pdf" class="dfe-attachment__link govuk-link">
        Annual Report 2024
      </a>
    </h3>
    <p class="dfe-attachment__metadata">
      <abbr title="Portable Document Format" class="dfe-attachment__abbr">PDF</abbr>,
      <span class="dfe-attachment__attribute">1.2 MB</span>
    </p>
  </div>
</div>

{% endblock %}

Attachment with multiple metadata and compact styling

This example includes multiple metadata items (e.g., file type, size, and date) and uses the compact variant.

Attachment with multiple metadata and compact styling

Example
HTML
Web Template

Policy Document 2024

PDF, 500 KB

Published: 1 April 2025

<div class="dfe-attachment">
  <div class="dfe-attachment__thumbnail">
    <a class="govuk-link" target="_self" tabindex="-1" aria-hidden="true" href="/path/to/file.pdf">
      <svg class="dfe-attachment__thumbnail-image">
        <path d="M12,59h9v9h-9v-9ZM30,77v9h39v-9H30ZM30,104h57v-9H30v9ZM30,122h48v-9H30v9ZM12,86h9v-9h-9v9ZM12,122h9v-9h-9v9ZM12,104h9v-9h-9v9ZM30,68h57v-9H30v9ZM35.2,21c-.3-.2-.6-.4-1-.5s-.8-.2-1.3-.2h-2.6v5.5h2.6c.5,0,1,0,1.3-.2s.7-.3,1-.5c.3-.2.5-.5.7-.8s.2-.7.2-1.1h0c0-.5,0-.9-.2-1.2-.2-.3-.4-.6-.7-.8h0ZM52.4,21.9c-.4-.5-1-.9-1.6-1.1-.7-.3-1.5-.4-2.4-.4h-2.7v11.5h2.7c.9,0,1.7-.1,2.4-.4s1.2-.7,1.6-1.1c.4-.5.7-1.1.9-1.7.2-.7.3-1.4.3-2.1v-.7c0-.8,0-1.5-.3-2.1-.2-.6-.5-1.2-.9-1.7h0ZM87,12v27H12V12h75ZM39.8,23c0-.9-.1-1.6-.4-2.4-.3-.7-.7-1.4-1.2-1.9-.5-.5-1.2-1-1.9-1.2-.8-.3-1.6-.5-2.5-.5h-7.2v17.9h3.6v-6h3.2c.9,0,1.8-.1,2.6-.5.8-.3,1.4-.7,2-1.2.5-.5,1-1.2,1.3-1.9.3-.7.5-1.5.5-2.4h0ZM57.4,26c0-1.3-.2-2.6-.5-3.7s-.9-2-1.6-2.8c-.7-.8-1.6-1.4-2.7-1.8-1.1-.4-2.3-.6-3.8-.6h-6.6v17.9h6.6c1.5,0,2.7-.2,3.8-.6,1.1-.4,2-1,2.7-1.8.7-.8,1.3-1.7,1.6-2.8.4-1.1.5-2.3.5-3.7h0ZM72.4,17.1h-12.1v17.9h3.6v-7.5h7.8v-3.3h-7.8v-3.8h8.4s0-3.3,0-3.3Z"></path>
      </svg>
    </a>
  </div>
  <div class="dfe-attachment__details">
    <h3 class="dfe-attachment__title">
      <a href="/path/to/file.pdf" class="dfe-attachment__link govuk-link">
        Policy Document 2024
      </a>
    </h3>
    <p class="dfe-attachment__metadata">
      <abbr title="Microsoft Word Document" class="dfe-attachment__abbr">PDF</abbr>,
      <span class="dfe-attachment__attribute">500 KB</span>
    </p>
    <p class="dfe-attachment__metadata dfe-attachment__metadata--compact">
      Published: <span class="dfe-attachment__attribute">1 April 2025</span>
    </p>
  </div>
</div>

Warning This is a basic web template page layout with a logged-in user check and does not include additional liquid items which are commonplace on a CRM Portal.

{% extends 'DfE/Layouts/2ColumnWideLeft' %}

{% block main %}

{% unless user %}
  <script>
    window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
  </script>
{% endunless %}

<div class="dfe-attachment">
  <div class="dfe-attachment__thumbnail">
    <a class="govuk-link" target="_self" tabindex="-1" aria-hidden="true" href="/path/to/file.pdf">
      <svg class="dfe-attachment__thumbnail-image">
        <path d="M12,59h9v9h-9v-9ZM30,77v9h39v-9H30ZM30,104h57v-9H30v9ZM30,122h48v-9H30v9ZM12,86h9v-9h-9v9ZM12,122h9v-9h-9v9ZM12,104h9v-9h-9v9ZM30,68h57v-9H30v9ZM35.2,21c-.3-.2-.6-.4-1-.5s-.8-.2-1.3-.2h-2.6v5.5h2.6c.5,0,1,0,1.3-.2s.7-.3,1-.5c.3-.2.5-.5.7-.8s.2-.7.2-1.1h0c0-.5,0-.9-.2-1.2-.2-.3-.4-.6-.7-.8h0ZM52.4,21.9c-.4-.5-1-.9-1.6-1.1-.7-.3-1.5-.4-2.4-.4h-2.7v11.5h2.7c.9,0,1.7-.1,2.4-.4s1.2-.7,1.6-1.1c.4-.5.7-1.1.9-1.7.2-.7.3-1.4.3-2.1v-.7c0-.8,0-1.5-.3-2.1-.2-.6-.5-1.2-.9-1.7h0ZM87,12v27H12V12h75ZM39.8,23c0-.9-.1-1.6-.4-2.4-.3-.7-.7-1.4-1.2-1.9-.5-.5-1.2-1-1.9-1.2-.8-.3-1.6-.5-2.5-.5h-7.2v17.9h3.6v-6h3.2c.9,0,1.8-.1,2.6-.5.8-.3,1.4-.7,2-1.2.5-.5,1-1.2,1.3-1.9.3-.7.5-1.5.5-2.4h0ZM57.4,26c0-1.3-.2-2.6-.5-3.7s-.9-2-1.6-2.8c-.7-.8-1.6-1.4-2.7-1.8-1.1-.4-2.3-.6-3.8-.6h-6.6v17.9h6.6c1.5,0,2.7-.2,3.8-.6,1.1-.4,2-1,2.7-1.8.7-.8,1.3-1.7,1.6-2.8.4-1.1.5-2.3.5-3.7h0ZM72.4,17.1h-12.1v17.9h3.6v-7.5h7.8v-3.3h-7.8v-3.8h8.4s0-3.3,0-3.3Z"></path>
      </svg>
    </a>
  </div>
  <div class="dfe-attachment__details">
    <h3 class="dfe-attachment__title">
      <a href="/path/to/file.pdf" class="dfe-attachment__link govuk-link">
        Policy Document 2024
      </a>
    </h3>
    <p class="dfe-attachment__metadata">
      <abbr title="Microsoft Word Document" class="dfe-attachment__abbr">PDF</abbr>,
      <span class="dfe-attachment__attribute">500 KB</span>
    </p>
    <p class="dfe-attachment__metadata dfe-attachment__metadata--compact">
      Published: <span class="dfe-attachment__attribute">1 April 2025</span>
    </p>
  </div>
</div>

{% endblock %}

Attachment with expandable details

This example includes a govuk-details component for additional information (e.g., accessibility details).

Accessibility Report 2024

PDF, 2.5 MB

Accessibility information

This PDF has been checked for accessibility and meets WCAG 2.2 AA standards.

<div class="dfe-attachment">
  <div class="dfe-attachment__thumbnail">
    <a class="govuk-link" target="_self" tabindex="-1" aria-hidden="true" href="/path/to/file.pdf">
      <svg class="dfe-attachment__thumbnail-image">
        <path d="M12,59h9v9h-9v-9ZM30,77v9h39v-9H30ZM30,104h57v-9H30v9ZM30,122h48v-9H30v9ZM12,86h9v-9h-9v9ZM12,122h9v-9h-9v9ZM12,104h9v-9h-9v9ZM30,68h57v-9H30v9ZM35.2,21c-.3-.2-.6-.4-1-.5s-.8-.2-1.3-.2h-2.6v5.5h2.6c.5,0,1,0,1.3-.2s.7-.3,1-.5c.3-.2.5-.5.7-.8s.2-.7.2-1.1h0c0-.5,0-.9-.2-1.2-.2-.3-.4-.6-.7-.8h0ZM52.4,21.9c-.4-.5-1-.9-1.6-1.1-.7-.3-1.5-.4-2.4-.4h-2.7v11.5h2.7c.9,0,1.7-.1,2.4-.4s1.2-.7,1.6-1.1c.4-.5.7-1.1.9-1.7.2-.7.3-1.4.3-2.1v-.7c0-.8,0-1.5-.3-2.1-.2-.6-.5-1.2-.9-1.7h0ZM87,12v27H12V12h75ZM39.8,23c0-.9-.1-1.6-.4-2.4-.3-.7-.7-1.4-1.2-1.9-.5-.5-1.2-1-1.9-1.2-.8-.3-1.6-.5-2.5-.5h-7.2v17.9h3.6v-6h3.2c.9,0,1.8-.1,2.6-.5.8-.3,1.4-.7,2-1.2.5-.5,1-1.2,1.3-1.9.3-.7.5-1.5.5-2.4h0ZM57.4,26c0-1.3-.2-2.6-.5-3.7s-.9-2-1.6-2.8c-.7-.8-1.6-1.4-2.7-1.8-1.1-.4-2.3-.6-3.8-.6h-6.6v17.9h6.6c1.5,0,2.7-.2,3.8-.6,1.1-.4,2-1,2.7-1.8.7-.8,1.3-1.7,1.6-2.8.4-1.1.5-2.3.5-3.7h0ZM72.4,17.1h-12.1v17.9h3.6v-7.5h7.8v-3.3h-7.8v-3.8h8.4s0-3.3,0-3.3Z"></path>
      </svg>
    </a>
  </div>
  <div class="dfe-attachment__details">
    <h3 class="dfe-attachment__title">
      <a href="/path/to/file.pdf" class="dfe-attachment__link govuk-link">
        Accessibility Report 2024
      </a>
    </h3>
    <p class="dfe-attachment__metadata">
      <abbr title="Portable Document Format" class="dfe-attachment__abbr">PDF</abbr>,
      <span class="dfe-attachment__attribute">2.5 MB</span>
    </p>
    <details class="govuk-details" data-module="govuk-details">
      <summary class="govuk-details__summary">
        <span class="govuk-details__summary-text">
          Accessibility information
        </span>
      </summary>
      <div class="govuk-details__text">
        This PDF has been checked for accessibility and meets WCAG 2.2 AA standards.
      </div>
    </details>
  </div>
</div>

Warning This is a basic web template page layout with a logged-in user check and does not include additional liquid items which are commonplace on a CRM Portal.

{% extends 'DfE/Layouts/2ColumnWideLeft' %}

{% block main %}

{% unless user %}
  <script>
    window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
  </script>
{% endunless %}

<div class="dfe-attachment">
  <div class="dfe-attachment__thumbnail">
    <a class="govuk-link" target="_self" tabindex="-1" aria-hidden="true" href="/path/to/file.pdf">
      <svg class="dfe-attachment__thumbnail-image">
        <path d="M12,59h9v9h-9v-9ZM30,77v9h39v-9H30ZM30,104h57v-9H30v9ZM30,122h48v-9H30v9ZM12,86h9v-9h-9v9ZM12,122h9v-9h-9v9ZM12,104h9v-9h-9v9ZM30,68h57v-9H30v9ZM35.2,21c-.3-.2-.6-.4-1-.5s-.8-.2-1.3-.2h-2.6v5.5h2.6c.5,0,1,0,1.3-.2s.7-.3,1-.5c.3-.2.5-.5.7-.8s.2-.7.2-1.1h0c0-.5,0-.9-.2-1.2-.2-.3-.4-.6-.7-.8h0ZM52.4,21.9c-.4-.5-1-.9-1.6-1.1-.7-.3-1.5-.4-2.4-.4h-2.7v11.5h2.7c.9,0,1.7-.1,2.4-.4s1.2-.7,1.6-1.1c.4-.5.7-1.1.9-1.7.2-.7.3-1.4.3-2.1v-.7c0-.8,0-1.5-.3-2.1-.2-.6-.5-1.2-.9-1.7h0ZM87,12v27H12V12h75ZM39.8,23c0-.9-.1-1.6-.4-2.4-.3-.7-.7-1.4-1.2-1.9-.5-.5-1.2-1-1.9-1.2-.8-.3-1.6-.5-2.5-.5h-7.2v17.9h3.6v-6h3.2c.9,0,1.8-.1,2.6-.5.8-.3,1.4-.7,2-1.2.5-.5,1-1.2,1.3-1.9.3-.7.5-1.5.5-2.4h0ZM57.4,26c0-1.3-.2-2.6-.5-3.7s-.9-2-1.6-2.8c-.7-.8-1.6-1.4-2.7-1.8-1.1-.4-2.3-.6-3.8-.6h-6.6v17.9h6.6c1.5,0,2.7-.2,3.8-.6,1.1-.4,2-1,2.7-1.8.7-.8,1.3-1.7,1.6-2.8.4-1.1.5-2.3.5-3.7h0ZM72.4,17.1h-12.1v17.9h3.6v-7.5h7.8v-3.3h-7.8v-3.8h8.4s0-3.3,0-3.3Z"></path>
      </svg>
    </a>
  </div>
  <div class="dfe-attachment__details">
    <h3 class="dfe-attachment__title">
      <a href="/path/to/file.pdf" class="dfe-attachment__link govuk-link">
        Accessibility Report 2024
      </a>
    </h3>
    <p class="dfe-attachment__metadata">
      <abbr title="Portable Document Format" class="dfe-attachment__abbr">PDF</abbr>,
      <span class="dfe-attachment__attribute">2.5 MB</span>
    </p>
    <details class="govuk-details" data-module="govuk-details">
      <summary class="govuk-details__summary">
        <span class="govuk-details__summary-text">
          Accessibility information
        </span>
      </summary>
      <div class="govuk-details__text">
        This PDF has been checked for accessibility and meets WCAG 2.2 AA standards.
      </div>
    </details>
  </div>
</div>

{% endblock %}

If you would like any additional advice or guidance with using these examples on Power Pages, please contact the Solutions Delivery Team.