Attachment

When to use this component

Use the attachment component to display downloadable file attachments (e.g. PDFs, Word documents) with a thumbnail, title, and metadata like file type or size.

When not to 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.

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

Alternative file type icons

Use the appropriate thumbnail icon for the file type you are linking to. The examples above use a PDF icon. Below are alternative icons for other common file types.

Document

Use for Word documents (.doc, .docx), OpenDocument text (.odt), and rich text formats (.rtf).

Document file attachment

Example
HTML
Web Template

Meeting Minutes

DOCX, 245 KB

<div class="dfe-attachment">
  <div class="dfe-attachment__thumbnail">
    <a class="govuk-link" target="_self" tabindex="-1" aria-hidden="true" href="/path/to/file.docx">
      <svg class="dfe-attachment__thumbnail-image" version="1.1" viewBox="0 0 99 140" aria-hidden="true">
        <path d="M12 12h75v27H12zM12 59h9v9h-9zM12 77h9v9h-9zM12 95h9v9h-9zM12 113h9v9h-9zM30 59h57v9H30zM30 77h39v9H30zM30 95h57v9H30zM30 113h48v9H30z" stroke-width="0" />
      </svg>
    </a>
  </div>
  <div class="dfe-attachment__details">
    <h3 class="dfe-attachment__title">
      <a href="/path/to/document.docx" class="dfe-attachment__link govuk-link">
        Meeting Minutes
      </a>
    </h3>
    <p class="dfe-attachment__metadata">
      <abbr title="Microsoft Word Document" class="dfe-attachment__abbr">DOCX</abbr>,
      <span class="dfe-attachment__attribute">245 KB</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.docx">
      <svg class="dfe-attachment__thumbnail-image" version="1.1" viewBox="0 0 99 140" aria-hidden="true">
        <path d="M12 12h75v27H12zM12 59h9v9h-9zM12 77h9v9h-9zM12 95h9v9h-9zM12 113h9v9h-9zM30 59h57v9H30zM30 77h39v9H30zM30 95h57v9H30zM30 113h48v9H30z" stroke-width="0" />
      </svg>
    </a>
  </div>
  <div class="dfe-attachment__details">
    <h3 class="dfe-attachment__title">
      <a href="/path/to/document.docx" class="dfe-attachment__link govuk-link">
        Meeting Minutes
      </a>
    </h3>
    <p class="dfe-attachment__metadata">
      <abbr title="Microsoft Word Document" class="dfe-attachment__abbr">DOCX</abbr>,
      <span class="dfe-attachment__attribute">245 KB</span>
    </p>
  </div>
</div>


{% endblock %}

Spreadsheet

Use for Excel files (.xls, .xlsx), OpenDocument spreadsheets (.ods), and CSV files (.csv).

Spreadsheet file attachment

Example
HTML
Web Template

Budget Summary

XLSX, 89 KB

<div class="dfe-attachment">
  <div class="dfe-attachment__thumbnail">
    <a class="govuk-link" target="_self" tabindex="-1" aria-hidden="true" href="/path/to/file.xlsx">
      <svg class="dfe-attachment__thumbnail-image" version="1.1" viewBox="0 0 99 140" aria-hidden="true">
        <path d="M12 12h75v27H12zm0 47h18.75v63H12zm55 2v59H51V61h16m2-2H49v63h20V59z" stroke-width="0" />
        <path d="M49 61.05V120H32.8V61.05H49m2-2H30.75v63H51V59zm34 2V120H69.05V61.05H85m2-2H67v63h20V59z" stroke-width="0" />
        <path d="M30 68.5h56.5M30 77.34h56.5M30 112.7h56.5M30 95.02h56.5M30 86.18h56.5M30 103.86h56.5" fill="none" stroke-miterlimit="10" stroke-width="2" />
      </svg>
    </a>
  </div>
  <div class="dfe-attachment__details">
    <h3 class="dfe-attachment__title">
      <a href="/path/to/spreadsheet.xlsx" class="dfe-attachment__link govuk-link">
        Budget Summary
      </a>
    </h3>
    <p class="dfe-attachment__metadata">
      <abbr title="Microsoft Excel Spreadsheet" class="dfe-attachment__abbr">XLSX</abbr>,
      <span class="dfe-attachment__attribute">89 KB</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.xlsx">
      <svg class="dfe-attachment__thumbnail-image" version="1.1" viewBox="0 0 99 140" aria-hidden="true">
        <path d="M12 12h75v27H12zm0 47h18.75v63H12zm55 2v59H51V61h16m2-2H49v63h20V59z" stroke-width="0" />
        <path d="M49 61.05V120H32.8V61.05H49m2-2H30.75v63H51V59zm34 2V120H69.05V61.05H85m2-2H67v63h20V59z" stroke-width="0" />
        <path d="M30 68.5h56.5M30 77.34h56.5M30 112.7h56.5M30 95.02h56.5M30 86.18h56.5M30 103.86h56.5" fill="none" stroke-miterlimit="10" stroke-width="2" />
      </svg>
    </a>
  </div>
  <div class="dfe-attachment__details">
    <h3 class="dfe-attachment__title">
      <a href="/path/to/spreadsheet.xlsx" class="dfe-attachment__link govuk-link">
        Budget Summary
      </a>
    </h3>
    <p class="dfe-attachment__metadata">
      <abbr title="Microsoft Excel Spreadsheet" class="dfe-attachment__abbr">XLSX</abbr>,
      <span class="dfe-attachment__attribute">89 KB</span>
    </p>
  </div>
</div>


{% endblock %}

HTML

Use for HTML documents or web pages (.html, .htm).

HTML file attachment

Example
HTML
Web Template

Accessibility Statement

HTML

<div class="dfe-attachment">
  <div class="dfe-attachment__thumbnail">
    <a class="govuk-link" target="_self" tabindex="-1" aria-hidden="true" href="/path/to/page.html">
      <svg class="dfe-attachment__thumbnail-image" version="1.1" viewBox="0 0 99 140" aria-hidden="true">
        <path d="M30,95h57v9H30V95z M30,77v9h39v-9H30z M30,122h48v-9H30V122z M12,68h9v-9h-9V68z M12,104h9v-9h-9V104z M12,86h9v-9h-9V86z M12,122h9v-9h-9V122z M87,12v27H12V12H87z M33,17h-4v8h-6v-8h-4v18h4v-7l6,0v7l4,0V17z M49,17H35l0,3h5v15h4V20l5,0V17z M68,17h-4 l-5,6l-5-6h-4v18h4l0-12l5,6l5-6l0,12h4V17z M81,32h-6V17h-4v18h10V32z M30,68h57v-9H30V68z" stroke-width="0" />
      </svg>
    </a>
  </div>
  <div class="dfe-attachment__details">
    <h3 class="dfe-attachment__title">
      <a href="/path/to/page.html" class="dfe-attachment__link govuk-link">
        Accessibility Statement
      </a>
    </h3>
    <p class="dfe-attachment__metadata">
      <abbr title="Hypertext Markup Language" class="dfe-attachment__abbr">HTML</abbr>
    </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/page.html">
      <svg class="dfe-attachment__thumbnail-image" version="1.1" viewBox="0 0 99 140" aria-hidden="true">
        <path d="M30,95h57v9H30V95z M30,77v9h39v-9H30z M30,122h48v-9H30V122z M12,68h9v-9h-9V68z M12,104h9v-9h-9V104z M12,86h9v-9h-9V86z M12,122h9v-9h-9V122z M87,12v27H12V12H87z M33,17h-4v8h-6v-8h-4v18h4v-7l6,0v7l4,0V17z M49,17H35l0,3h5v15h4V20l5,0V17z M68,17h-4 l-5,6l-5-6h-4v18h4l0-12l5,6l5-6l0,12h4V17z M81,32h-6V17h-4v18h10V32z M30,68h57v-9H30V68z" stroke-width="0" />
      </svg>
    </a>
  </div>
  <div class="dfe-attachment__details">
    <h3 class="dfe-attachment__title">
      <a href="/path/to/page.html" class="dfe-attachment__link govuk-link">
        Accessibility Statement
      </a>
    </h3>
    <p class="dfe-attachment__metadata">
      <abbr title="Hypertext Markup Language" class="dfe-attachment__abbr">HTML</abbr>
    </p>
  </div>
</div>


{% endblock %}

Generic

Use for any other file type not covered above, such as compressed archives (.zip, .rar), text files (.txt), or unknown formats.

Generic file attachment

Example
HTML
Web Template

Project Files

ZIP, 5.4 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.zip">
      <svg class="dfe-attachment__thumbnail-image" version="1.1" viewBox="0 0 84 120" aria-hidden="true">
        <path d="M74.85 5v106H5" fill="none" stroke-miterlimit="10" stroke-width="2" />
        <path d="M79.85 10v106H10" fill="none" stroke-miterlimit="10" stroke-width="2" />
      </svg>
    </a>
  </div>
  <div class="dfe-attachment__details">
    <h3 class="dfe-attachment__title">
      <a href="/path/to/file.zip" class="dfe-attachment__link govuk-link">
        Project Files
      </a>
    </h3>
    <p class="dfe-attachment__metadata">
      <abbr title="Compressed Archive" class="dfe-attachment__abbr">ZIP</abbr>,
      <span class="dfe-attachment__attribute">5.4 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.zip">
      <svg class="dfe-attachment__thumbnail-image" version="1.1" viewBox="0 0 84 120" aria-hidden="true">
        <path d="M74.85 5v106H5" fill="none" stroke-miterlimit="10" stroke-width="2" />
        <path d="M79.85 10v106H10" fill="none" stroke-miterlimit="10" stroke-width="2" />
      </svg>
    </a>
  </div>
  <div class="dfe-attachment__details">
    <h3 class="dfe-attachment__title">
      <a href="/path/to/file.zip" class="dfe-attachment__link govuk-link">
        Project Files
      </a>
    </h3>
    <p class="dfe-attachment__metadata">
      <abbr title="Compressed Archive" class="dfe-attachment__abbr">ZIP</abbr>,
      <span class="dfe-attachment__attribute">5.4 MB</span>
    </p>
  </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.