Files

Files

Files are a representation of content uploaded as an attachment.

Base

Preview

No content has been added for this component.

No content has been added for this component.

About Base

A figure component is a self-contained unit of content, such as an image with an optional caption. The figure component should NOT be used with icons or logos. A figure can optionally be cropped to a specific ratio such as 16x9, 4x3 and 1x1 with the use of .slds-image__crop and passing in a ratio class such as .slds-image__crop_16-by-9.


About Files

Accessibility

Every <img> you add to your site needs to have an alt attribute. If the image is informational, set the alt equal to a descriptive alternative for that image. If the image is decorative or redundant to adjacent text, set alt="", which conveys to assistive technology users that the image isn’t necessary for understanding the page. Avoid using generic strings like photo, image, or icon as alt values, as they don’t communicate valuable content to the user.


Overview of CSS Classes

Selector.slds-file
Summary

Initializes a file component

Restrictfigure, div
VariantTrue
Selector.slds-file__crop
Summary

Set crop boundaries to a file component, set to 16:9 by default

Restrict.slds-file div, .slds-file a
Selector.slds-file__crop_1-by-1
Summary

Crops file to a ratio of 1:1

Restrict.slds-file__crop
ModifierTrue
Selector.slds-file__crop_16-by-9
Summary

Crops file to a ratio of 16:9

Restrict.slds-file__crop
ModifierTrue
Selector.slds-file__crop_4-by-3
Summary

Crops file to a ratio of 4:3

Restrict.slds-file__crop
ModifierTrue
Selector.slds-file__title
Summary

Image caption associated to a file

Restrict.slds-file figcaption, .slds-file div
Selector.slds-file__title_overlay
Summary

Adds overlay to file

Restrict.slds-file__title
Selector.slds-file__title_card
Summary

Creates card title bar on file

Restrict.slds-file__title
Selector.slds-file__title_scrim
Summary

Creates gradient scrim bar on file

Restrict.slds-file__title
Selector.slds-file-has-actions
Summary

Hack to accomodate for text truncation next to actions menu buttons

Restrict.slds-file__title
Selector.slds-file_overlay
Summary

If text sits on top of image, apply an overlay with this class

Restrict.slds-file div
Selector.slds-file_card
Summary

Change style of image to a card look

Restrict.slds-file
Selector.slds-file__icon
Summary

When only image type is available, this class help position the file type icon

Restrict.slds-file div, .slds-file span
Selector.slds-file__actions-menu
Summary

This positions the action menu on the title bar

Restrict.slds-file div
Selector.slds-file__external-icon
Summary

This adds an external icon to the top left side of the card

Restrict.slds-file div
Selector.slds-file__loading-icon
Summary

This changes the color of the loading icon

Restrict.slds-file svg
Selector.slds-file_center-icon
Summary

This vertically centers the icon when there is no title bar

Restrict.slds-file