File Download

The File Download component contains information about one or more files with a link to download them.

The File Download component standardizes how downloadable resources—such as PDFs, DOCX, CSVs, and ZIP archives—are presented on a webpage.  Use this component wherever the primary user action is to download a file, not to navigate to a standalone page. Typical placements include resource libraries, course pages, research downloads, policy documents, and release assets. Files will download to the users local machine, not open in a new tab. If the file's language differs from the main page language, please indicate the file's language in the meta data.

Examples

Default

Student Handbook English PDF 1.2 MB

Research Proposal Template DOCX 500 KB

<div class="bux-file-download-container" role="list">
  <div class="bux-file-download" role="listitem">
    <a class="bux-file-download__filename" href="#" download>
      <span class="bux-file-download__icon" aria-hidden="true"></span>
      <span class="bux-file-download__label">Student Handbook</span>
    </a>
    <span class="bux-file-download__meta">
      <span class="bux-file-download__language">English</span>
      <span class="bux-file-download__type">PDF</span>
      <span class="bux-file-download__size">1.2 MB</span>
    </span>
  </div>
  <div class="bux-file-download" role="listitem">
    <a class="bux-file-download__filename" href="#" download>
      <span class="bux-file-download__icon" aria-hidden="true"></span>
      <span class="bux-file-download__label">Research Proposal Template</span>
    </a>
    <span class="bux-file-download__meta">
      <span class="bux-file-download__type">DOCX</span>
      <span class="bux-file-download__size">500 KB</span>
    </span>
  </div>
</div>

{#
Buckeye UX - version 1.4.0
Copyright (C) 2026 The Ohio State University
#}

{# Normalize to array if single file #}
{% set file_list = files ?? [{
    link: file_link,
    name: file_name,
    language: file_language,
    type: file_type,
    size: file_size
}] %}

<div class="bux-file-download-container" role="list">
{% for file in file_list %}
    <div class="bux-file-download" role="listitem">
        <a class="bux-file-download__filename" href="{{ file.link }}" download>
            <span class="bux-file-download__icon" aria-hidden="true"></span>
            <span class="bux-file-download__label">{{ file.name }}</span>
        </a>
        <span class="bux-file-download__meta">
            {% if file.language %}
                <span class="bux-file-download__language">{{ file.language }}</span>
            {% endif %}
            <span class="bux-file-download__type">{{ file.type }}</span>
            <span class="bux-file-download__size">{{ file.size }}</span>
        </span>
    </div>
{% endfor %}
</div>

Usage

Dos

• Provide enough context (such as a descriptive file name and file details) to the user to decide whether to download the file
• Indicate the file's language in the metadata only if it differs from the main page language. (Example: If the main page language is English and the language in the file is Spanish, indicate "Spanish" in the file's metadata)

Don'ts

• Do not use a vague file name.
• Do not indicate the language in the metadata when the file language matches the main page language. (Example: If the main page language and file language are English, do not include "English" in the file's metadata)