Upload File Box

<div

  class="box is-border-dashed is-no-shadow u-padding-24"

  style="--box-border-radius:var(--border-radius-xsmall);"

>

  <div class="upload-file-box">

    <div class="upload-file-box-image"><span class="icon-upload" aria-hidden="true"></span></div>

    <div class="u-min-width-0 u-text-center">

      <h5 class="upload-file-box-title heading-level-7 u-inline">

        <span class="is-only-desktop">Drag and drop files here to upload</span>

        <span class="is-not-desktop">Upload a File</span>

      </h5>

      <button class="tooltip u-inline u-margin-inline-start-4" aria-label="variables info">

        <span class="icon-info" aria-hidden="true"></span>

        <span class="tooltip-popup" role="tooltip">Only PNGs accepted.</span>

      </button>

    </div>

    <div class="u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile">

      <p class="upload-file-box-info body-text-2">Max file size: 10MB</p>

      <button class="button is-secondary is-full-width-mobile">

        <span class="text">Choose a file</span>

      </button>

    </div>

  </div>

</div>

<div

  class="box is-border-dashed is-no-shadow u-padding-24"

  style="--box-border-radius:var(--border-radius-xsmall);"

>

  <div class="upload-file-box">

    <div class="upload-file-box-image"><span class="icon-upload" aria-hidden="true"></span></div>

    <div class="u-min-width-0 u-text-center">

      <h5 class="upload-file-box-title heading-level-7 u-inline">

        <span class="is-only-desktop">Drag and drop files here to upload</span>

        <span class="is-not-desktop">Upload a File</span>

      </h5>

      <button class="tooltip u-inline u-margin-inline-start-4" aria-label="variables info">

        <span class="icon-info" aria-hidden="true"></span>

        <span class="tooltip-popup" role="tooltip">Only PNGs accepted.</span>

      </button>

    </div>

    <div class="u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile">

      <p class="upload-file-box-info body-text-2">Max file size: 10MB</p>

      <button class="button is-secondary is-full-width-mobile">

        <span class="text">Choose a file</span>

      </button>

    </div>

    <ul class="upload-file-box-list u-min-width-0">

      <li class="u-flex u-cross-center u-min-width-0">

        <span class="icon-document" aria-hidden="true"></span>

        <span class="upload-file-box-name u-trim u-min-width-0">pink-floyd-cover</span>

        <span class="upload-file-box-name u-min-width-0 u-flex-shrink-0">.png</span>

        <span class="upload-file-box-size u-margin-inline-start-4 u-margin-inline-end-16">4MB</span>

        <button

          type="button"

          class="button is-text is-only-icon u-margin-inline-start-auto"

          aria-label="remove file"

          style="--button-size:1.5rem;"

        >

          <span class="icon-x" aria-hidden="true"></span>

        </button>

      </li>

    </ul>

  </div>

</div>

<div

  class="box is-border-dashed is-no-shadow u-padding-24"

  style="--box-border-radius:var(--border-radius-xsmall);"

>

  <div class="upload-file-box">

    <div class="upload-file-box-image"><span class="icon-upload" aria-hidden="true"></span></div>

    <div class="u-min-width-0 u-text-center">

      <h5 class="upload-file-box-title heading-level-7 u-inline">

        <span class="is-only-desktop">Drag and drop files here to upload</span>

        <span class="is-not-desktop">Upload a File</span>

      </h5>

      <button class="tooltip u-inline u-margin-inline-start-4" aria-label="variables info">

        <span class="icon-info" aria-hidden="true"></span>

        <span class="tooltip-popup" role="tooltip">Only PNGs accepted.</span>

      </button>

    </div>

    <div class="u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile">

      <p class="upload-file-box-info body-text-2">Max file size: 10MB</p>

      <button class="button is-secondary is-full-width-mobile">

        <span class="text">Choose a file</span>

      </button>

    </div>

    <ul class="upload-file-box-list u-min-width-0">

      <li class="u-flex u-cross-center u-min-width-0">

        <span class="icon-document" aria-hidden="true"></span>

        <span class="upload-file-box-name u-trim u-min-width-0">pink-floyd-cover</span>

        <span class="upload-file-box-name u-min-width-0 u-flex-shrink-0">.png</span>

        <span class="upload-file-box-size u-margin-inline-start-4 u-margin-inline-end-16">4MB</span>

        <button

          type="button"

          class="button is-text is-only-icon u-margin-inline-start-auto"

          aria-label="remove file"

          style="--button-size:1.5rem;"

        >

          <span class="icon-x" aria-hidden="true"></span>

        </button>

      </li>

    </ul>

  </div>

</div>

<p class="helper u-color-text-danger u-margin-block-start-8">

  <span class="icon-exclamation-circle" aria-hidden="true"></span>

  <span class="text">Display a contextual error message here</span>

</p>