Download List

<!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>