files
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
<div style="width:20rem">
<div class="slds-file slds-file_card slds-has-title">
<figure>States
File with no image
<div style="width:20rem">
<div class="slds-file slds-file_card slds-has-title">
<figure>File with no title
<div style="width:20rem">
<div class="slds-file slds-file_card">
<figure>File with actions
<div style="width:20rem">
<div class="slds-file slds-file_card slds-has-title">
<figure>File with no title + actions
<div style="width:20rem">
<div class="slds-file slds-file_card">
<figure>File with external icon
<div style="width:20rem">
<div class="slds-file slds-file_card slds-has-title">
<figure>File in loading state with title
<div style="width:20rem">
<div class="slds-file slds-file_card slds-file_loading slds-has-title">
<figure>File in loading state without title
<div style="width:20rem">
<div class="slds-file slds-file_card slds-file_loading">
<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">> 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">Modifiers
Ratio
.slds-file__crop_4-by-3
<div style="width:20rem">
<div class="slds-file slds-file_card slds-has-title">
<figure>.slds-file__crop_16-by-9
<div style="width:20rem">
<div class="slds-file slds-file_card slds-has-title">
<figure>.slds-file__crop_1-by-1
<div style="width:20rem">
<div class="slds-file slds-file_card slds-has-title">
<figure>