<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">&</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">&</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">&</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>