Download Sections
File downloads, app downloads, multi-platform and resume sections.
Simple File Download
company-handbook-2025.pdf
<div class="uk-dl-simple">
<div class="uk-dl-icon"><i class="fas fa-file-pdf"></i></div>
<div class="uk-dl-info">
<div class="uk-dl-name">company-handbook-2025.pdf</div>
<div class="uk-dl-meta">PDF · 2.4 MB · Updated 3 days ago</div>
</div>
<button class="uk-dl-btn"><i class="fas fa-download"></i></button>
</div>
<style>
.uk-dl-simple {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.15rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 0.85rem;
transition: all 0.15s;
}
.uk-dl-simple:hover {
border-color: rgba(30, 58, 138, 0.4);
}
.uk-dl-icon {
width: 44px; height: 44px;
border-radius: 0.65rem;
background: #fee2e2;
color: #dc2626;
display: flex; align-items: center; justify-content: center;
font-size: 1.15rem;
flex-shrink: 0;
}
.uk-dl-info { flex: 1; min-width: 0; text-align: left; }
.uk-dl-name {
font-size: 0.88rem;
font-weight: 700;
color: #0b1b2f;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.uk-dl-meta {
font-size: 0.72rem;
color: #94a3b8;
margin-top: 2px;
}
.uk-dl-btn {
width: 36px; height: 36px;
border-radius: 50%;
background: #eef2f8;
color: #1e3a8a;
border: 0;
cursor: pointer;
font-size: 0.85rem;
flex-shrink: 0;
transition: all 0.15s;
}
.uk-dl-btn:hover {
background: #1e3a8a;
color: #fff;
}
</style>
App Store Download Buttons
<div class="uk-dl-apps">
<a href="#" class="uk-dl-store">
<i class="fab fa-apple"></i>
<div>
<div class="uk-dl-store-top">Download on the</div>
<div class="uk-dl-store-bot">App Store</div>
</div>
</a>
<a href="#" class="uk-dl-store">
<i class="fab fa-google-play"></i>
<div>
<div class="uk-dl-store-top">Get it on</div>
<div class="uk-dl-store-bot">Google Play</div>
</div>
</a>
<a href="#" class="uk-dl-store dark">
<i class="fab fa-windows"></i>
<div>
<div class="uk-dl-store-top">Download for</div>
<div class="uk-dl-store-bot">Windows</div>
</div>
</a>
</div>
<style>
.uk-dl-apps {
display: flex;
gap: 0.65rem;
flex-wrap: wrap;
justify-content: center;
}
.uk-dl-store {
display: inline-flex;
align-items: center;
gap: 0.65rem;
padding: 0.6rem 1.1rem;
background: #fff;
color: #0b1b2f;
border: 1px solid #e2e8f0;
border-radius: 0.65rem;
text-decoration: none;
transition: all 0.15s;
}
.uk-dl-store:hover {
transform: translateY(-2px);
border-color: #1e3a8a;
color: #1e3a8a;
}
.uk-dl-store i {
font-size: 1.5rem;
}
.uk-dl-store-top {
font-size: 0.6rem;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.uk-dl-store-bot {
font-size: 0.9rem;
font-weight: 700;
margin-top: -2px;
}
.uk-dl-store.dark {
background: #0b1b2f;
color: #fff;
border-color: #0b1b2f;
}
.uk-dl-store.dark .uk-dl-store-top { color: rgba(255,255,255,0.6); }
.uk-dl-store.dark:hover { background: #1e293b; color: #fff; }
</style>
Multi-File Download List
<div class="uk-dl-list-head">
<div class="uk-dl-list-title">Project Assets</div>
<span class="uk-dl-list-count">4 files · 24.8 MB</span>
</div>
<div class="uk-dl-list-item">
<div class="uk-dl-list-icon"><i class="fas fa-file-zipper"></i></div>
<div class="uk-dl-list-info">
<div class="uk-dl-list-name">source-code.zip</div>
<div class="uk-dl-list-size">8.2 MB</div>
</div>
<button class="uk-dl-list-dl"><i class="fas fa-download"></i></button>
</div>
<div class="uk-dl-list-foot">
<button class="uk-dl-list-all">Download All</button>
</div>
<style>
.uk-dl-list-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.15rem;
border-bottom: 1px solid #f1f5f9;
}
.uk-dl-list-title {
font-size: 0.9rem;
font-weight: 800;
color: #0b1b2f;
}
.uk-dl-list-count {
font-size: 0.72rem;
color: #94a3b8;
}
.uk-dl-list-item {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.75rem 1.15rem;
border-bottom: 1px solid #f8fafc;
}
.uk-dl-list-icon {
width: 36px; height: 36px;
border-radius: 0.5rem;
display: flex; align-items: center; justify-content: center;
font-size: 0.85rem;
flex-shrink: 0;
}
.uk-dl-list-info { flex: 1; text-align: left; min-width: 0; }
.uk-dl-list-name {
font-size: 0.85rem;
font-weight: 600;
color: #0b1b2f;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.uk-dl-list-size {
font-size: 0.7rem;
color: #94a3b8;
margin-top: 1px;
}
.uk-dl-list-dl {
width: 30px; height: 30px;
border-radius: 50%;
background: transparent;
border: 0;
color: #94a3b8;
cursor: pointer;
font-size: 0.8rem;
}
.uk-dl-list-dl:hover { background: #eef2f8; color: #1e3a8a; }
.uk-dl-list-foot {
padding: 0.75rem 1.15rem;
border-top: 1px solid #e2e8f0;
}
.uk-dl-list-all {
width: 100%;
padding: 0.6rem;
background: #f8fafc;
color: #1e3a8a;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
font-weight: 700;
font-size: 0.8rem;
cursor: pointer;
}
.uk-dl-list-all:hover { background: #1e3a8a; color: #fff; border-color: #1e3a8a; }
</style>
Resume Download Card
Download My Resume
Updated March 2025 · 1 page · PDF
<div class="uk-dl-resume">
<div class="uk-dl-resume-header"></div>
<div class="uk-dl-resume-body">
<div class="uk-dl-resume-icon"><i class="fas fa-file-pdf"></i></div>
<div class="uk-dl-resume-title">Download My Resume</div>
<div class="uk-dl-resume-desc">Updated March 2025 · 1 page · PDF</div>
<button class="uk-dl-resume-btn">
<i class="fas fa-download"></i> Download PDF
</button>
</div>
</div>
<style>
.uk-dl-resume {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 1rem;
overflow: hidden;
text-align: center;
}
.uk-dl-resume-header {
height: 60px;
background: linear-gradient(135deg, #1e3a8a, #6366f1);
}
.uk-dl-resume-body { padding: 0 1.5rem 1.5rem; }
.uk-dl-resume-icon {
width: 56px; height: 56px;
border-radius: 50%;
background: #fee2e2;
color: #dc2626;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.25rem;
margin-top: -28px;
border: 4px solid #fff;
}
.uk-dl-resume-title {
font-size: 1.05rem;
font-weight: 800;
color: #0b1b2f;
margin: 0.75rem 0 0.35rem;
}
.uk-dl-resume-desc {
font-size: 0.8rem;
color: #94a3b8;
margin-bottom: 1.25rem;
}
.uk-dl-resume-btn {
width: 100%;
padding: 0.65rem;
background: #1e3a8a;
color: #fff;
border: 0;
border-radius: 0.5rem;
font-weight: 700;
font-size: 0.82rem;
cursor: pointer;
}
.uk-dl-resume-btn:hover { background: #0f2a5c; }
</style>
Download with Progress
webnexa-theme.zip
18.4 MB
72%
Downloading... 13.2 MB of 18.4 MB
<div class="uk-dl-progress">
<div class="uk-dl-progress-icon"><i class="fas fa-file-zipper"></i></div>
<div class="uk-dl-progress-body">
<div class="uk-dl-progress-head">
<div>
<div class="uk-dl-progress-name">webnexa-theme.zip</div>
<div class="uk-dl-progress-size">18.4 MB</div>
</div>
<div class="uk-dl-progress-pct">72%</div>
</div>
<div class="uk-dl-progress-bar">
<div class="uk-dl-progress-fill" style="width:72%;"></div>
</div>
<div class="uk-dl-progress-foot">
<span>Downloading... 13.2 MB of 18.4 MB</span>
<button class="uk-dl-progress-cancel">Cancel</button>
</div>
</div>
</div>
<style>
.uk-dl-progress {
display: flex;
gap: 1rem;
padding: 1.25rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 1rem;
}
.uk-dl-progress-icon {
width: 44px; height: 44px;
border-radius: 0.65rem;
background: #eef2f8;
color: #1e3a8a;
display: flex; align-items: center; justify-content: center;
font-size: 1rem;
flex-shrink: 0;
}
.uk-dl-progress-body { flex: 1; text-align: left; }
.uk-dl-progress-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 0.65rem;
}
.uk-dl-progress-name {
font-size: 0.85rem;
font-weight: 700;
color: #0b1b2f;
}
.uk-dl-progress-size {
font-size: 0.72rem;
color: #94a3b8;
margin-top: 1px;
}
.uk-dl-progress-pct {
font-size: 0.9rem;
font-weight: 800;
color: #1e3a8a;
}
.uk-dl-progress-bar {
height: 6px;
background: #e2e8f0;
border-radius: 999px;
overflow: hidden;
margin-bottom: 0.5rem;
}
.uk-dl-progress-fill {
height: 100%;
background: #1e3a8a;
border-radius: 999px;
transition: width 0.4s;
}
.uk-dl-progress-foot {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.72rem;
color: #94a3b8;
}
.uk-dl-progress-cancel {
background: transparent;
border: 0;
color: #dc2626;
font-weight: 700;
font-size: 0.72rem;
cursor: pointer;
}
.uk-dl-progress-cancel:hover { text-decoration: underline; }
</style>
Multi-Platform Downloads
<div class="uk-dl-grid">
<a href="#" class="uk-dl-grid-item">
<i class="fab fa-windows"></i>
<div class="uk-dl-grid-name">Windows</div>
<div class="uk-dl-grid-size">64-bit · 12.4 MB</div>
</a>
</div>
<style>
.uk-dl-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 0.65rem;
}
.uk-dl-grid-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 1.25rem 0.75rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 0.85rem;
text-decoration: none;
transition: all 0.15s;
}
.uk-dl-grid-item:hover {
transform: translateY(-2px);
border-color: #1e3a8a;
color: #1e3a8a;
}
.uk-dl-grid-item i {
font-size: 1.75rem;
color: #1e3a8a;
}
.uk-dl-grid-name {
font-size: 0.85rem;
font-weight: 700;
color: #0b1b2f;
}
.uk-dl-grid-size {
font-size: 0.68rem;
color: #94a3b8;
}
</style>