Files - Lightning Design System

Files are a representation of content uploaded as an attachment.

Base

Preview

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: The CSS class being referred to.
Summary: A description of what the class does.
Support: Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
Restrict: The selector that the class name is allowed to be used on.
Variant: The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
Modifier: A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.

Selector	`.slds-file`
Summary	Initializes a file component
Support	dev-ready
Restrict	`figure, div`
Variant	True

Selector	`.slds-file_loading`
Summary	A decorator class that prevents hover styles from being applied to Files in loading state
Restrict	`.slds-file, .slds-image`

Selector	`.slds-has-title`
Summary	A decorator class that allows the hover icon to be positioned properly when File has a title
Restrict	`.slds-file, .slds-image`

Selector	`.slds-file__crop`
Summary	Set crop boundaries to a file component, set to 16:9 by default
Restrict	`.slds-file a, .slds-file figure`

Selector	`.slds-file__crop_1-by-1`
Summary	Crops file to a ratio of 1:1
Restrict	`.slds-file__crop`
Modifier	True

Selector	`.slds-file__crop_16-by-9`
Summary	Crops file to a ratio of 16:9
Restrict	`.slds-file__crop`
Modifier	True

Selector	`.slds-file__crop_4-by-3`
Summary	Crops file to a ratio of 4:3
Restrict	`.slds-file__crop`
Modifier	True

Selector	`.slds-file__figure`
Summary	Figure element that contains the image of a File
Restrict	`.slds-file a, .slds-file figure`

Selector	`.slds-file__figure_portrait`
Summary	Modifying class if the image in a figure is in portrait orientation
Restrict	`.slds-file a, .slds-file figure`

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`

Variants

Examples

Modifiers