File Preview Card Component

Uploading File Preview Card

<div class="file-preview-card">
  <div class="file-preview-card__body">
    <span
      class="progress-spinner progress-spinner--large file-preview-card__asset"
      aria-label="Busy"
      role="img"
    >
      <svg class="icon icon--30" aria-hidden="true">
        <use href="#icon-spinner-30" />
      </svg>
    </span>
    <button
      class="icon-btn file-preview-card__action"
      type="button"
      aria-label="Cancel upload"
    >
      <svg class="icon icon--16" height="16" width="16" aria-hidden="true">
        <use href="#icon-close-16" />
      </svg>
    </button>
  </div>
</div>

Image File Preview Card

For image file types, the image is showcased in the body of the card.

<div class="file-preview-card">
  <div class="file-preview-card__body">
    <img
      class="file-preview-card__asset"
      src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-real-square-pic.jpg"
      alt="Image"
    />
    <button
      class="icon-btn file-preview-card__action"
      type="button"
      aria-label="Open menu"
    >
      <svg class="icon icon--16" height="16" width="16" aria-hidden="true">
        <use href="#icon-overflow-vertical-16" />
      </svg>
    </button>
  </div>
</div>

Video File Preview Card

For video file types, a preview is shown within the body of the card.

MP4

<div class="file-preview-card">
  <div class="file-preview-card__body">
    <video
      class="file-preview-card__asset"
      src="https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4"
    />
    <button
      class="icon-btn file-preview-card__action"
      type="button"
      aria-label="Open menu"
    >
      <svg class="icon icon--16" height="16" width="16" aria-hidden="true">
        <use href="#icon-overflow-vertical-16" />
      </svg>
    </button>
    <div class="file-preview-card__info">
      <svg class="icon icon--16" height="16" width="16" aria-hidden="true">
        <use href="#icon-play-16" />
      </svg>
      MP4
    </div>
  </div>
</div>

Document File Preview Card

For document file types, such as documents, the card does not display a preview within its body.

CSV

<div class="file-preview-card">
  <div class="file-preview-card__body">
    <svg class="icon file-preview-card__asset" aria-hidden="true">
      <use href="#icon-file-24" />
    </svg>
    <button
      class="icon-btn file-preview-card__action"
      type="button"
      aria-label="Open menu"
    >
      <svg class="icon icon--16" height="16" width="16" aria-hidden="true">
        <use href="#icon-overflow-vertical-16" />
      </svg>
    </button>
    <div class="file-preview-card__info">CSV</div>
  </div>
  <div class="file-preview-card__footer">
    <span> countries.csv </span>
    <span>
      English, German, Spanish, French, Polish, Dutch, Italian, Japanese,
      Portuguese, Arabic
    </span>
  </div>
</div>

See More File Preview Card

If the number of visual files exceeds the maximum display limit, a "See More" action button will appear at the center of the preview card, allowing you to view the additional files.

<div class="file-preview-card">
  <div class="file-preview-card__body">
    <img
      class="file-preview-card__asset file-preview-card__asset--fade"
      src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-real-square-pic.jpg"
      alt="Image"
    />
    <button class="icon-btn file-preview-card__see-more" type="button">
      <span> +15 </span>
    </button>
  </div>
</div>

File Preview Card Group Component Filter Chip Component