Component Blueprints

Files

  • HTML/CSS:Dev Ready
  • Layout:Desktop Only

Sections

Files are a representation of content uploaded as an attachment.
Preview:Description of the image
pdf
Proposal.pdf

About Files#

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.

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.

Base#

Preview:Description of the image
pdf
Proposal.pdf
<div style="width:20rem">
  <div class="slds-file slds-file_card slds-has-title">
    <figure>
      <a href="#" class="slds-file__crop">

States#

File with no image#

Preview:Image Title
image
Image Title
<div style="width:20rem">
  <div class="slds-file slds-file_card slds-has-title">
    <figure>
      <a href="#" class="slds-file__crop">

File with no title#

<div style="width:20rem">
  <div class="slds-file slds-file_card">
    <figure>
      <a href="#" class="slds-file__crop">

File with actions#

Preview:Description of the image
pdf
Proposal.pdf
<div style="width:20rem">
  <div class="slds-file slds-file_card slds-has-title">
    <figure>
      <a href="#" class="slds-file__crop">

File with no title + actions#

Preview:Description of the image
<div style="width:20rem">
  <div class="slds-file slds-file_card">
    <figure>
      <a href="#" class="slds-file__crop">

File with external icon#

Preview:Proposal.pdf
pdf
Proposal.pdf
Data provided by: salesforce1
<div style="width:20rem">
  <div class="slds-file slds-file_card slds-has-title">
    <figure>
      <a href="#" class="slds-file__crop">

File in loading state with title#

image
Image Title
<div style="width:20rem">
  <div class="slds-file slds-file_card slds-file_loading slds-has-title">
    <figure>
      <a href="#" class="slds-file__crop">

File in loading state without title#

<div style="width:20rem">
  <div class="slds-file slds-file_card slds-file_loading">
    <figure>
      <a href="#" class="slds-file__crop">

< 3 file attachments#

<ul class="slds-grid slds-grid_pull-padded">
  <li class="slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3">
    <div class="slds-file slds-file_card slds-has-title">
      <figure>

> 3 file attachments#

<ul class="slds-grid slds-grid_pull-padded">
  <li class="slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3">
    <div class="slds-file slds-file_card slds-has-title">
      <figure>

Modifiers#

Ratio#

.slds-file__crop_4-by-3#

Preview:Description of the image
pdf
Proposal.pdf
<div style="width:20rem">
  <div class="slds-file slds-file_card slds-has-title">
    <figure>
      <a href="#" class="slds-file__crop slds-file__crop_4-by-3">

.slds-file__crop_16-by-9#

Preview:Description of the image
pdf
Proposal.pdf
<div style="width:20rem">
  <div class="slds-file slds-file_card slds-has-title">
    <figure>
      <a href="#" class="slds-file__crop slds-file__crop_16-by-9">

.slds-file__crop_1-by-1#

Preview:Description of the image
pdf
Proposal.pdf
<div style="width:20rem">
  <div class="slds-file slds-file_card slds-has-title">
    <figure>
      <a href="#" class="slds-file__crop slds-file__crop_1-by-1">

Overview of CSS Classes#

Selector.slds-file
Summary

Initializes a file component

Supportdev-ready
Restrictfigure, div
VariantTrue
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__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__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
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__figure
Summary

Figure element that contains the image of a File

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

Text title for file name

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

Hack to accomodate for text truncation next to actions menu buttons

Restrict.slds-file__title
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_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

Files Release Notes

2.10.0

Fixed

  • Scoped the eyeball hover effect to the figure link only.
  • Added display and overflow css rules to allow for text truncation on .slds-file__text.

2.8.2

Fixed

  • Adjusted z-index for hover and focus state to not overlap modal overlays and the global header.

2.8.0

Fixed

  • Aligned hover and focus states to have matching styles
    • Added "Preview:" as accessible text via the slds-assistive-text utility.

2.7.0

Added

  • New class sld-file_loading for loading state.
    • In effort to prevent the hover styles from applying to the loading state, slds-file_loading is now added to slds-file.
  • Class slds-has-title for when Files have a title applied.
    • slds-has-title is now added to slds-file to ensure the Preview icon (displayed in hover state) is properly centered.
    • This class should not be added when slds-file_overlay is used.
  • z-index to titles and actions for non-loading states.
    • This is an effort to keep the new hover overlay styles from not covering the title and actions to keep them clickable.

Changed

  • New design treatment for hover state.
    • box-shadow and transition have been replaced with an overlay and absolutely-centered Preview icon.
    • This hover state does not appear on devices that do not support hover (e.g., mobile). Note that this does effect devices that supports both hover (e.g., touch) and no-hover (e.g., mouse) input devices, such as the Microsoft Surface.
  • New option for loading state.
    • Added a loading spinner option for Files with and without a title.

Fixed

  • Improved the color contrast of the text placed on top of a file overlay