Download List Template

A practical and clean template for listing downloadable assets, documents, or software.

This component arranges file information in a clean, row-based list, making it easy for users to find and download what they need.

A list of files for download, with distinct icons, details, and buttons.

Get Source Code Preview

About this Template

This download list is built on a semantic unordered list (ul), with each file presented as a list item. The structure is clear and accessible. Inside each list item, Flexbox is used to create a clean, responsive layout that organizes a distinct file icon, details, and a download button. The download button uses the HTML download attribute to prompt a file save.

Features

Semantic Structure: Uses a standard ul and li foundation, ideal for a list of files.
Industry-Standard Icons: Uses Font Awesome for recognizable file type icons (PDF, ZIP, DOCX), allowing users to identify files at a glance.
Accessible by Design: Icons are treated as decorative and hidden from screen readers with aria-hidden="true", preventing redundancy as the file's name and type are already available as text.
Functional Download Links: The anchor tags include the download attribute, which signals to the browser that the linked file should be downloaded.
Self-Contained Styles: All CSS is scoped to the .download-list-template class to prevent conflicts with your website's existing styles.

Code Breakdown

The component is wrapped in a div with the .download-list-template class. The list itself is a ul element with a class of .file-list.

Each list item (.file-item) is a flex container with display: flex, justify-content: space-between, and align-items: center applied. This ensures all parts of the row (icon and details on the left, button on the right) are spaced out evenly and vertically aligned. A nested flex container is used to group the file type icon with its corresponding name and size.

Code

Here's the full code for the template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Download List</title>
    
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    
    <style>
        /* ==========================================================================
           Styles for Demo Preview Only
           ========================================================================== */
        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f8fafc;
            color: #334155;
            margin: 0;
            padding: 2rem;
            display: flex;
            justify-content: center;
        }

/* ==========================================================================
           Download List Component Styles - Copy from here
           ========================================================================== */
        .download-list-template {
            --dl-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --dl-primary-text-color: #1e293b;
            --dl-secondary-text-color: #64748b;
            --dl-border-color: #e2e8f0;
            --dl-bg-color: #ffffff;
            --dl-hover-bg-color: #f1f5f9;
            --dl-pdf-color: #E53E3E;
            --dl-zip-color: #D97706;
            --dl-doc-color: #2B579A;

font-family: var(--dl-font-family);
            color: var(--dl-primary-text-color);
            width: 100%;
            max-width: 800px;
        }
        
        .download-list-template *,
        .download-list-template *::before,
        .download-list-template *::after {
            box-sizing: border-box;
        }
        
        .download-list-template .download-header {
            text-align: center;
            margin-bottom: 2.5rem;
        }
        
        .download-list-template .download-header h1 {
            font-size: 2rem;
            margin: 0 0 0.5rem 0;
        }

.download-list-template .download-header p {
            margin: 0;
            color: var(--dl-secondary-text-color);
        }

.file-list {
            list-style: none;
            margin: 0;
            padding: 0;
            border: 1px solid var(--dl-border-color);
            border-radius: .5rem;
            overflow: hidden;
        }
        
        .file-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 1.5rem;
            background-color: var(--dl-bg-color);
            transition: background-color 0.2s ease;
            gap: 1rem;
        }
        
        .file-item:not(:last-child) {
            border-bottom: 1px solid var(--dl-border-color);
        }

.file-item:hover {
            background-color: var(--dl-hover-bg-color);
        }

.file-identity {
            display: flex;
            align-items: center;
            gap: 1rem;
            flex-grow: 1;
            min-width: 0;
        }

.file-icon {
            font-size: 28px;
            width: 32px;
            text-align: center;
            flex-shrink: 0;
        }
        
        .icon-pdf { color: var(--dl-pdf-color); }
        .icon-zip { color: var(--dl-zip-color); }
        .icon-doc { color: var(--dl-doc-color); }
        
        .file-details {
            min-width: 0; 
        }

.file-name {
            font-weight: 500;
            margin: 0 0 .25rem 0;
            font-size: .95rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

.file-size {
            margin: 0;
            font-size: .8rem;
            color: var(--dl-secondary-text-color);
        }

.download-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            text-decoration: none;
            padding: .5rem 1rem;
            background-color: #f1f5f9;
            color: #475569;
            border: 1px solid #e2e8f0;
            border-radius: .25rem;
            font-size: .875rem;
            font-weight: 500;
            white-space: nowrap;
            transition: background-color .2s, border-color .2s, color .2s;
            flex-shrink: 0;
        }
        
        .download-btn:hover {
            background-color: #e2e8f0;
            border-color: #cbd5e1;
            color: var(--dl-primary-text-color);
        }
    </style>
</head>
<body>

<div class="download-list-template">
    <header class="download-header">
        <h1>Department of Redundant Adjectives Agency</h1>
        <p>Essential forms and mandated official document filings.</p>
    </header>

<ul class="file-list">
        <li class="file-item">
            <div class="file-identity">
                <i class="fa-solid fa-file-pdf file-icon icon-pdf" aria-hidden="true"></i>
                <div class="file-details">
                    <h3 class="file-name">Regulation 81-B: Redundant Adjective Use</h3>
                    <p class="file-size">PDF, 3.2 MB</p>
                </div>
            </div>
            <a href="#" class="download-btn" download>
                <i class="fa-solid fa-download" aria-hidden="true"></i> Download
            </a>
        </li>
        <li class="file-item">
            <div class="file-identity">
                <i class="fa-solid fa-file-zipper file-icon icon-zip" aria-hidden="true"></i>
                <div class="file-details">
                    <h3 class="file-name">Toolkit for Circular Logic Application.zip</h3>
                    <p class="file-size">ZIP Archive, 15.7 MB</p>
                </div>
            </div>
            <a href="#" class="download-btn" download>
                <i class="fa-solid fa-download" aria-hidden="true"></i> Download
            </a>
        </li>
        <li class="file-item">
            <div class="file-identity">
                <i class="fa-solid fa-file-word file-icon icon-doc" aria-hidden="true"></i>
                <div class="file-details">
                    <h3 class="file-name">Memo on the Inadvisability of Short Sentences.docx</h3>
                    <p class="file-size">DOCX, 850 KB</p>
                </div>
            </div>
            <a href="#" class="download-btn" download>
                <i class="fa-solid fa-download" aria-hidden="true"></i> Download
            </a>
        </li>
    </ul>
</div>

</body>
</html>

View Output