File Download

Use file download links to help users download documents, showing the file type, name, and size.

Default File Download

Annual Report 2024PDF, 2.4 MB

<a href="/files/annual-report-2024.pdf" class="file-download" download>
  <img src="/icons/documents/pdf.svg" alt="" class="file-download-icon">
  <div class="file-download-info">
    <span class="file-download-name">Annual Report 2024</span>
    <span class="file-download-meta">PDF, 2.4 MB</span>
  </div>
</a>

Multiple Files

<ul class="file-download-list">
  <li>
    <a href="/files/form.pdf" class="file-download" download>
      <img src="/icons/documents/pdf.svg" alt="" class="file-download-icon">
      <div class="file-download-info">
        <span class="file-download-name">Application Form</span>
        <span class="file-download-meta">PDF, 156 KB</span>
      </div>
    </a>
  </li>
  <!-- More files... -->
</ul>

With Description

Privacy PolicyThis document explains how we collect, use, and protect your personal information.PDF, 320 KB • Last updated: January 2024

Available File Type Icons

Use the appropriate icon for each file type:

File Type	Icon	Extensions
PDF		.pdf
Word		.doc, .docx
Excel		.xls, .xlsx
PowerPoint		.ppt, .pptx
CSV		.csv
Image		.jpg, .png, .gif
ZIP		.zip, .rar

See the Downloads page for the complete list of document icons.

When to Use

Do

• Always show the file type and size
• Use descriptive file names
• Group related files together
• Use the download attribute for direct downloads

Don't

• Don't use generic names like "Document1.pdf"
• Don't hide file information
• Don't mix file downloads with regular links

Accessibility

• Include file type and size in the link text or visible metadata
• Use aria-describedby if file info is separate from the link
• Ensure icons have empty alt text (decorative)
• The link text should describe the document content

CSS Classes

.file-download { }
.file-download-icon { }
.file-download-info { }
.file-download-name { }
.file-download-description { }
.file-download-meta { }
.file-download-list { }
.file-download-detailed { }