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 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.
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).
Card component
<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 common place on a CRM Portal, for example, web role, URL parameter or record checks.
{% extends 'DfE/Layouts/2ColumnWideLeft' %}
{% block title %}{% endblock %}
{% block main %}
{% unless user %}
<script>
window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
</script>
{% endunless %}
## HTML content goes here ##
{% 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.
Card component
<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 common place on a CRM Portal, for example, web role, URL parameter or record checks.
{% extends 'DfE/Layouts/2ColumnWideLeft' %}
{% block main %}
{% unless user %}
<script>
window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
</script>
{% endunless %}
## HTML content goes here ##
{% endblock %}
Attachment with expandable details
This example includes a govuk-details component for additional information (e.g., accessibility details).
Radio component
<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 common place on a CRM Portal, for example, web role, URL parameter or record checks.
{% extends 'DfE/Layouts/2ColumnWideLeft' %}
{% block title %}{% endblock %}
{% block main %}
{% unless user %}
<script>
window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
</script>
{% endunless %}
## HTML content goes here ##
{% endblock %}
If you would like any additional advice or guidance with using these examples on Dynamics 365 Portals, please contact the Solutions Delivery Team.