Components

Files

Files are a representation of content uploaded as an attachment.

AttachmentAttachment › LinkAttachment › File with imageAttachment › File with no imageAttachment › File with actionsAttachmentdev ready

Preview

Code

<a href="javascript:void(0);" class="slds-media slds-box slds-grow slds-text-link--reset">
  <div class="slds-media__figure slds-medium-show">
    <div class="slds-image slds-size--small">
      <div class="slds-image__crop slds-image__crop--16-by-9">
        <img src="/assets/images/placeholder-img@16x9.jpg" alt="Image Title" />
      </div>
    </div>
  </div>
  <div class="slds-media__body">
    <h3 class="slds-text-heading--small">Maui By Air The Best Way Around The Island</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
    <span class="slds-text-body--small">Maui By Air The Best Way Around The Island</span>
  </div>
</a>

Multi AttachmentsMulti Attachments › FilesMulti Attachments › With overflowMulti Attachmentsdev ready

Preview

Code

<ul class="slds-grid slds-grid--pull-padded">
  <li class="slds-p-horizontal--small slds-size--1-of-2 slds-medium-size--1-of-3">
    <figure class="slds-image slds-image--card">
      <a href="javascript:void(0);" class="slds-image__crop slds-image__crop--16-by-9">
        <img src="/assets/images/placeholder-img@16x9.jpg" alt="Description of the image" />
      </a>
      <figcaption class="slds-image__title slds-image__title--card">
        <span class="slds-icon_container slds-m-right--x-small" title="image">
          <svg class="slds-icon slds-icon--x-small" aria-hidden="true">
            <use xlink:href="/assets/icons/doctype-sprite/svg/symbols.svg#image"></use>
          </svg>
          <span class="slds-assistive-text">image</span>
        </span>
        <span class="slds-image__text slds-truncate" title="Image Title">Image Title</span>
      </figcaption>
    </figure>
  </li>
  <li class="slds-p-horizontal--small slds-size--1-of-2 slds-medium-size--1-of-3">
    <figure class="slds-image slds-image--card">
      <a href="javascript:void(0);" class="slds-image__crop slds-image__crop--16-by-9">
        <span class="slds-image__icon slds-icon_container" title="pdf">
          <svg class="slds-icon" aria-hidden="true">
            <use xlink:href="/assets/icons/doctype-sprite/svg/symbols.svg#pdf"></use>
          </svg>
          <span class="slds-assistive-text">Image Title</span>
        </span>
      </a>
      <figcaption class="slds-image__title slds-image__title--card">
        <span class="slds-icon_container slds-m-right--x-small" title="pdf">
          <svg class="slds-icon slds-icon--x-small" aria-hidden="true">
            <use xlink:href="/assets/icons/doctype-sprite/svg/symbols.svg#pdf"></use>
          </svg>
          <span class="slds-assistive-text">pdf</span>
        </span>
        <span class="slds-image__text slds-truncate" title="Image Title">Image Title</span>
      </figcaption>
    </figure>
  </li>
</ul>

Component Overview

Files rely heavily on images and utility classes to piece together the layout so please pay close attention to the markup and classes.