Upload Box

Upload Box displays the status of all uploaded files.

Class Type
upload-box Upload Box A class representing an upload box

Components

Upload Boxes consist of six components:

Class Type
upload-box-header Header
upload-box-title Title
upload-box-content Content
upload-box-list List
upload-box-item Item
is-open Open State

File Uploads3

  • %
  • %
  • %

File Uploads3

  • 30%
    pending
  • 60%
    failed
<section class="upload-box u-width-full-line">
  <header class="upload-box-header">
    <h4 class="upload-box-title">
      <span class="text">File Uploads</span>
      <span class="amount">3</span>
    </h4>
    <button class="upload-box-button" aria-label="toggle upload box">
      <span class="icon-cheveron-down" aria-hidden="true"></span>
    </button>
    <button class="upload-box-button" aria-label="close upload box">
      <span class="icon-x" aria-hidden="true"></span>
    </button>
  </header>
  <div class="upload-box-content">
    <ul class="upload-box-list">
      <li class="upload-box-item">
        <div class="upload-image">
          <div
            class="progress"
            style="--progress-value:20"
            role="progressbar"
            aria-valuenow="20"
            aria-valuemin="0"
            aria-valuemax="100"
          ></div>
          <span class="icon">%</span>
        </div>
        <label for="file1" class="file-name">hello.mp4</label>
        <button class="upload-box-button" aria-label="Uploading">
          <span class="icon">&amp;</span>
        </button>
      </li>
      <li class="upload-box-item">
        <div class="upload-image">
          <div
            class="progress"
            style="--progress-value:70"
            role="progressbar"
            aria-valuenow="20"
            aria-valuemin="0"
            aria-valuemax="100"
          ></div>
          <span class="icon">%</span>
        </div>
        <label for="file1" class="file-name">hello.mp4</label>
        <button class="upload-box-button" aria-label="Uploading">
          <span class="icon">&amp;</span>
        </button>
      </li>
      <li class="upload-box-item">
        <div class="upload-image is-finished">
          <div
            class="progress"
            style="--progress-value:100"
            role="progressbar"
            aria-valuenow="20"
            aria-valuemin="0"
            aria-valuemax="100"
          ></div>
          <span class="icon">%</span>
        </div>
        <label for="file1" class="file-name">hello.mp4</label>
        <button class="upload-box-button" aria-label="Uploading">
          <span class="icon">&amp;</span>
        </button>
      </li>
    </ul>
  </div>
</section>
<section class="upload-box u-width-full-line">
  <header class="upload-box-header">
    <h4 class="upload-box-title">
      <span class="text">File Uploads</span>
      <span class="amount">3</span>
    </h4>
    <button class="upload-box-button" aria-label="toggle upload box">
      <span class="icon-cheveron-down" aria-hidden="true"></span>
    </button>
    <button class="upload-box-button" aria-label="close upload box">
      <span class="icon-x" aria-hidden="true"></span>
    </button>
  </header>
  <div class="upload-box-content is-open">
    <ul class="upload-box-list">
      <li class="upload-box-item">
        <div class="upload-image">
          <div
            class="progress"
            style="--progress-value:20"
            role="progressbar"
            aria-valuenow="20"
            aria-valuemin="0"
            aria-valuemax="100"
          ></div>
          <span class="text">30%</span>
        </div>
        <label for="file1" class="file-name">
          <p class="text u-margin-block-start-8">hello.mp4</p>
        </label>
        <div class="tag is-warning">pending</div>
        <button class="upload-box-button" aria-label="cancel upload">
          <span class="icon-x" aria-hidden="true"></span>
        </button>
      </li>
      <li class="upload-box-item">
        <div class="upload-image">
          <div
            class="progress"
            style="--progress-value:70"
            role="progressbar"
            aria-valuenow="20"
            aria-valuemin="0"
            aria-valuemax="100"
          ></div>
          <span class="text">60%</span>
        </div>
        <label for="file1" class="file-name">
          <p class="text u-margin-block-start-8">hello.mp4</p>
        </label>
        <div class="tag is-danger">failed</div>
        <button class="upload-box-button" aria-label="cancel upload">
          <span class="icon-x" aria-hidden="true"></span>
        </button>
      </li>
      <li class="upload-box-item">
        <div class="upload-image is-finished u-margin-inline-end-16">
          <div
            class="progress"
            style="--progress-value:100"
            role="progressbar"
            aria-valuenow="20"
            aria-valuemin="0"
            aria-valuemax="100"
          ></div>
          <span class="icon-document" aria-hidden="true"></span>
        </div>
        <label for="file1" class="file-name">
          <p class="text u-margin-block-start-8">hello.mp4</p>
        </label>
        <button class="icon-button u-color-text-success" aria-label="Uploaded">
          <span class="icon-check" aria-hidden="true"></span>
        </button>
      </li>
    </ul>
  </div>
</section>

Upload Loader

Class Type
upload-image Upload Loader Upload Loader displays the uploading progress of a specific file. 
<div class="upload-image">
  <div
    class="progress"
    style="--progress-value:20"
    role="progressbar"
    aria-valuenow="20"
    aria-valuemin="0"
    aria-valuemax="100"
  ></div>
  <span class="icon"></span>
</div>