Files

files

.slds-file — Files are a representation of content uploaded as an attachment.

base

.slds-file — Initializes a file component

base › File with no image

base › File with no title

base › File with truncating title

base › File with actions

base › File with no title + actions

base › File with external icon

base › File in loading state with title

base › File in loading state without title

base › Less than 3 file attachments

base › Greater than 3 file attachments

base › Link attachment

base › Crop 4 x 3

base › Crop 16 x 9

base › Crop 1 by 1

.slds-file_loading

.slds-file_loading — A decorator class that prevents hover styles from being applied to Files in loading state

.slds-has-title

.slds-has-title — A decorator class that allows the hover icon to be positioned properly when File has a title

.slds-file__figure_portrait

.slds-file__figure_portrait — Modifying class if the image in a figure is in portrait orientation

.slds-file__crop

.slds-file__crop — Set crop boundaries to a file component, set to 16:9 by default

.slds-file__crop_1-by-1

.slds-file__crop_1-by-1 — Crops file to a ratio of 1:1

.slds-file__crop_16-by-9

.slds-file__crop_16-by-9 — Crops file to a ratio of 16:9

.slds-file__crop_4-by-3

.slds-file__crop_4-by-3 — Crops file to a ratio of 4:3

.slds-file__figure

.slds-file__figure — Figure element that contains the image of a File

.slds-file__title

.slds-file__title — Image caption associated to a file

.slds-file__text

.slds-file__text — Text title for file name

.slds-file-has-actions

.slds-file-has-actions — Hack to accomodate for text truncation next to actions menu buttons

.slds-file__title_overlay

.slds-file__title_overlay — Adds overlay to file

.slds-file__title_card

.slds-file__title_card — Creates card title bar on file

.slds-file__title_scrim

.slds-file__title_scrim — Creates gradient scrim bar on file

.slds-file_overlay

.slds-file_overlay — If text sits on top of image, apply an overlay with this class

.slds-file_card

.slds-file_card — Change style of image to a card look

.slds-file__icon

.slds-file__icon — When only image type is available, this class help position the file type icon

.slds-file__actions-menu

.slds-file__actions-menu — This positions the action menu on the title bar

.slds-file__external-icon

.slds-file__external-icon — This adds an external icon to the top left side of the card

.slds-file__loading-icon

.slds-file__loading-icon — This changes the color of the loading icon

.slds-file_center-icon

.slds-file_center-icon — This vertically centers the icon when there is no title bar