Skin CSS Framework

Main Navigation

CSS Components

Guides

@ebay/skin/file-preview-card^ALPHA

DS v0.1

The file-preview-card can be used to display file previews. A css grid layout is used to define the areas in which certain elements can be placed.

Uploading File Preview Card

Image File Preview Card

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

Video File Preview Card

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

MP4

Document File Preview Card

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

CSV

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>

<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>

<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>

<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>