Indigo Design System v1.2.0

File Object

A File Object represents the presence of a file on the screen to users.

Overview

File Objects give users an efficient view of a file’s info - name, type, and size. You can use a File Object to represent a downloadable file or an uploaded file. Pair with the appropriate file icon from the Icon library (XLS, PDF, PPT, DOC, or CVS).

Design and Implementation

The File Object content is split into 4 cells. The icon cell contains the icon that corresponds to the file type, the label cell contains the file name, the file-type cell contains the file extension and the file-size cell contains the file size.

The indi-file-object__cell--label class truncates the file name using CSS allowing file names of any length to be used.

file-pdf customersnapcard .pdf (123k)
html
copy-2 Copy to Clipboard 
<span class="indi-file-object">
    <span class="indi-file-object__grid">
        <span class="indi-file-object__cell indi-file-object__cell--icon">
            <svg class="indi-icon indi-icon--medium indi-icon--valign-middle indi-file-object__icon" aria-labelledby="title">
                <title>file-pdf</title>
                <use xlink:href="/assets/icons/indi_icons.svg#file-pdf">
            </svg>
        </span>
        <span class="indi-file-object__cell indi-file-object__cell--label" title="customersnapcard"> customersnapcard </span>
        <span class="indi-file-object__cell indi-file-object__cell--file-type"> .pdf </span>
        <span class="indi-file-object__cell indi-file-object__cell--file-size"> (123k) </span>
    </span>
</span>

Use Guidelines

Use When

  • You use the File Upload component.
  • Listing downloadable files.

Don’t Use When

  • Using Long Form Text.