File Display & Download

Display downloadable files with semantic <a download> links. No custom classes — the framework styles file lists automatically.

File List

Annual Report 2024.pdf PDF · 2.4 MB
Banner Image.png PNG · 890 KB
Source Code.zip ZIP · 14.2 MB

<ul>
  <li>
    <span class="axicon render" data-name="File-Text"></span>
    <a href="report.pdf" download>Annual Report.pdf</a>
    <small>PDF · 2.4 MB</small>
  </li>
</ul>

Download Button

Download axiom.min.css

<!-- <a download> triggers file download, looks like a button -->
<a href="file.css" download class="primary button">
  <span class="axicon render" data-name="Download"></span>
  Download file.css
</a>

Accessibility

Use native <a href download> — not a <div> with a click handler
Include file type and size in the link text or nearby <small>
The download attribute can specify a filename: download="report-2024.pdf"
For large files, warn the user about file size before they click

Features

Semantic Structure - Built with native HTML5 elements for maximum reliability.
Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens.
Fully Responsive - Scales perfectly from mobile to desktop screens.
No JS Dependency - Core functionality relies on pure CSS for maximum performance.
Customizable - Easily extendable via Axiom01's design tokens and modifiers.

Use Cases

The File Display Download component is designed for versatile implementation across modern web applications. Ideal scenarios include:

Dashboards & Admin Panels - Structured data presentation and interface control.
Content Management Systems - Organizing complex information hierarchies and media.
E-Commerce Platforms - Enhancing product discovery and user workflows.
Marketing Sites - Highlighting key product offerings cleanly and effectively.
SaaS Applications - Delivering native-feeling, responsive app experiences.