BUX Component Development Platform

File Download: Single File 

<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">Title of Download</span>
    </a>
    <span class="bux-file-download__meta">
        <span class="bux-file-download__language">Spanish</span>
        <span class="bux-file-download__type">PDF</span>
        <span class="bux-file-download__size">1.2 MB</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
file_link: '#'
file_name: Title of Download
file_type: PDF
file_size: 1.2 MB
file_language: Spanish
  • Content: 
    {
  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();
      }
    }
  });
}
  • URL: /components/raw/file-download/file-download.js
  • Filesystem Path: src/components/file-download/file-download.js
  • Size: 446 Bytes
  • Content: 
    .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%;
    }
  }
}
  • URL: /components/raw/file-download/file-download.scss
  • Filesystem Path: src/components/file-download/file-download.scss
  • Size: 1.1 KB

No notes defined.