<div class="bux-file-download">
<a class="bux-file-download__filename" href="#" download>
<span class="bux-file-download__icon"></span>
<span class="bux-file-download__label">First Document</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">
<a class="bux-file-download__filename" href="#" download>
<span class="bux-file-download__icon"></span>
<span class="bux-file-download__label">Second Document</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>
{# 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
}] %}
{% for file in file_list %}
<div class="bux-file-download">
<a class="bux-file-download__filename" href="{{ file.link }}" download>
<span class="bux-file-download__icon"></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 %}
site_name_prefix: Office of
site_name: Learning Relations Excellence
site_slogan: Additional text or site slogan
address_1: 100 Building Name
address_2: 1 Oval Mall
city: Columbus
state: OH
zip: '43210'
contact_email: email@osu.edu
contact_phone: 614-292-OHIO
contact_tty: 614-688-8605
files:
- link: '#'
name: First Document
type: PDF
size: 1.2 MB
language: English
- link: '#'
name: Second Document
type: DOCX
size: 500 KB
{
const cards = document.querySelectorAll('.bux-file-download');
// Allow users to click and drag on text if they hold the mouse down for at least 200ms
cards.forEach(card => {
card.style.cursor = 'pointer';
let down, up, link = card.querySelector('a');
card.onmousedown = () => down = +new Date();
card.onmouseup = () => {
up = +new Date();
if ((up - down) < 200) {
link.click();
}
}
});
}
.bux-file-download {
display: flex;
justify-content: space-between;
align-items: center;
padding: $sp-8;
line-height: 18px;
border-top: 2px solid $gray-light-40;
border-bottom: 2px solid $gray-light-40;
& + & {
border-top: none;
}
&:hover {
background-color: #EFF1F2;
.bux-file-download__label {
border-bottom: 2px solid $scarlet;
margin-bottom: -2px;
}
}
&__filename {
font-weight: 700;
color: $scarlet;
text-decoration: none;
max-width: 65%;
display: flex;
align-items: flex-start;
gap: $sp-8;
}
&__icon {
font-size: $ts-sm;
font-family: $icon;
flex-shrink: 0;
&:before {
content: "\f015";
}
}
&__meta {
display: flex;
flex-wrap: wrap-reverse;
justify-content: flex-end;
column-gap: $sp-16;
row-gap: $sp-4;
color: $gray-dark-80;
@media (max-width: $bp-md) {
column-gap: $sp-8;
}
}
&__language {
text-align: right;
@media (max-width: $bp-md) {
flex-basis: 100%;
}
}
}
No notes defined.