Components

Tiles

A tile is a grouping of related information associated with a record.

BaseBase › DefaultBase › Default with actionsBasedev ready

Preview

Code

<div class="slds-tile">
  <h3 class="slds-truncate" title="Salesforce UX"><a href="javascript:void(0);">Salesforce UX</a></h3>
  <div class="slds-tile__detail slds-text-body--small">
    <dl class="slds-list--horizontal slds-wrap">
      <dt class="slds-item--label slds-text-color--weak slds-truncate" title="First Label">First Label:</dt>
      <dd class="slds-item--detail slds-truncate">Description for first label</dd>
      <dt class="slds-item--label slds-text-color--weak slds-truncate" title="Second Label">Second Label:</dt>
      <dd class="slds-item--detail slds-truncate">Description for second label</dd>
    </dl>
  </div>
</div>

IconIcon › DefaultIcon › With actionsIcondev ready

Preview

Code

<div class="slds-tile slds-media">
  <div class="slds-media__figure">
    <svg class="slds-icon slds-icon-standard-groups" aria-hidden="true">
      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#groups"></use>
    </svg>
  </div>
  <div class="slds-media__body">
    <h3 class="slds-truncate" title="Salesforce UX"><a href="javascript:void(0);">Salesforce UX</a></h3>
    <div class="slds-tile__detail slds-text-body--small">
      <dl class="slds-list--horizontal slds-wrap">
        <dt class="slds-item--label slds-text-color--weak slds-truncate" title="First Label">First Label:</dt>
        <dd class="slds-item--detail slds-truncate">Description for first label</dd>
        <dt class="slds-item--label slds-text-color--weak slds-truncate" title="Second Label">Second Label:</dt>
        <dd class="slds-item--detail slds-truncate">Description for second label</dd>
      </dl>
    </div>
  </div>
</div>

AvatarAvatar › DefaultAvatar › With actionsAvatardev ready

Preview

Code

<div class="slds-tile slds-media">
  <div class="slds-media__figure">
    <span class="slds-avatar slds-avatar--circle slds-avatar--medium">
      <img src="/assets/images/avatar2.jpg" alt="Person&#x27;s name" />
    </span>
  </div>
  <div class="slds-media__body">
    <h3 class="slds-truncate" title="Lexee L. Jackson"><a href="javascript:void(0);">Lexee L. Jackson</a></h3>
    <div class="slds-tile__detail slds-text-body--small">
      <dl class="slds-list--horizontal slds-wrap">
        <dt class="slds-item--label slds-text-color--weak slds-truncate" title="First Label">First Label:</dt>
        <dd class="slds-item--detail slds-truncate">Description for first label</dd>
        <dt class="slds-item--label slds-text-color--weak slds-truncate" title="Second Label">Second Label:</dt>
        <dd class="slds-item--detail slds-truncate">Description for second label</dd>
      </dl>
    </div>
  </div>
</div>

TaskTask › DefaultTask › With actionsTaskdev ready

Preview

Code

<div class="slds-tile slds-media">
  <div class="slds-media__figure">
    <span class="slds-checkbox">
      <input type="checkbox" name="options" id="checkbox-2401" />
      <label class="slds-checkbox__label" for="checkbox-2401">
        <span class="slds-checkbox--faux"></span>
        <span class="slds-form-element__label slds-assistive-text">Did you complete this task?</span>
      </label>
    </span>
  </div>
  <div class="slds-media__body">
    <h3 class="slds-truncate" title="The Trammel Crow Company"><a href="javascript:void(0);">The Trammel Crow Company</a></h3>
    <div class="slds-tile__detail slds-text-body--small">
      <p class="slds-truncate">Assignee</p>
    </div>
  </div>
</div>

ArticleArticle › DefaultArticle › With like barArticledev ready

Preview

Code

<div class="slds-tile">
  <h3 class="slds-truncate" title="Company One beats Company Two to the 200-mile affordable electric car"><a href="javascript:void(0);">Company One beats Company Two to the 200-mile affordable electric car</a></h3>
  <div class="slds-tile__detail slds-text-body--small">
    <p>by Steve Author</p>
    <ul class="slds-list--horizontal slds-has-dividers--right">
      <li class="slds-item">Breaking News</li>
      <li class="slds-item">1 day ago</li>
    </ul>
  </div>
</div>

ListListdev ready

Preview

Code

<ul class="slds-has-dividers--bottom-space">
  <li class="slds-item">
    <div class="slds-tile slds-media">
      <div class="slds-media__figure">
        <svg class="slds-icon" aria-hidden="true">
          <use xlink:href="/assets/icons/doctype-sprite/svg/symbols.svg#zip"></use>
        </svg>
      </div>
      <div class="slds-media__body">
        <h3 class="slds-truncate" title="SLDS_038.zip"><a href="javascript:void(0);">SLDS_038.zip</a></h3>
        <div class="slds-tile__detail slds-text-body--small">
          <ul class="slds-list--horizontal slds-has-dividers--right">
            <li class="slds-item">May 9th, 2015</li>
            <li class="slds-item">3.6mb</li>
          </ul>
        </div>
      </div>
    </div>
  </li>
  <li class="slds-item">
    <div class="slds-tile slds-media">
      <div class="slds-media__figure">
        <svg class="slds-icon" aria-hidden="true">
          <use xlink:href="/assets/icons/doctype-sprite/svg/symbols.svg#zip"></use>
        </svg>
      </div>
      <div class="slds-media__body">
        <h3 class="slds-truncate" title="SLDS_038.zip"><a href="javascript:void(0);">SLDS_038.zip</a></h3>
        <div class="slds-tile__detail slds-text-body--small">
          <ul class="slds-list--horizontal slds-has-dividers--right">
            <li class="slds-item">May 9th, 2015</li>
            <li class="slds-item">3.6mb</li>
          </ul>
        </div>
      </div>
    </div>
  </li>
  <li class="slds-item">
    <div class="slds-tile slds-media">
      <div class="slds-media__figure">
        <svg class="slds-icon" aria-hidden="true">
          <use xlink:href="/assets/icons/doctype-sprite/svg/symbols.svg#zip"></use>
        </svg>
      </div>
      <div class="slds-media__body">
        <h3 class="slds-truncate" title="SLDS_038.zip"><a href="javascript:void(0);">SLDS_038.zip</a></h3>
        <div class="slds-tile__detail slds-text-body--small">
          <ul class="slds-list--horizontal slds-has-dividers--right">
            <li class="slds-item">May 9th, 2015</li>
            <li class="slds-item">3.6mb</li>
          </ul>
        </div>
      </div>
    </div>
  </li>
</ul>

BoardBoarddev ready

Preview

Code

<ul class="slds-has-dividers--around-space">
  <li class="slds-item">
    <div class="slds-tile slds-tile--board">
      <h3 class="slds-truncate" title="Anypoint Connectors"><a href="javascript:void(0);">Anypoint Connectors</a></h3>
      <div class="slds-tile__detail slds-text-body--small">
        <p class="slds-text-heading--medium">$500,000</p>
        <p class="slds-truncate" title="Company One"><a href="javascript:void(0);">Company One</a></p>
        <p class="slds-truncate">Closing 9/30/2015</p>
      </div>
    </div>
  </li>
  <li class="slds-item">
    <div class="slds-tile slds-tile--board">
      <h3 class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></h3>
      <div class="slds-tile__detail slds-text-body--small">
        <p class="slds-text-heading--medium">$185,000</p>
        <p class="slds-truncate" title="Company Two"><a href="javascript:void(0);">Company Two</a></p>
        <p class="slds-truncate slds-has-alert">Closing 12/15/2015</p>
        <span class="slds-icon_container slds-tile--board__icon">
          <svg class="slds-icon slds-icon-text-warning slds-icon--x-small" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#warning"></use>
          </svg>
          <span class="slds-assistive-text">Warning Icon</span>
        </span>
      </div>
    </div>
  </li>
  <li class="slds-item">
    <div class="slds-tile slds-tile--board">
      <h3 class="slds-truncate" title="600 Widgets"><a href="javascript:void(0);">600 Widgets</a></h3>
      <div class="slds-tile__detail slds-text-body--small">
        <p class="slds-text-heading--medium">$35,000</p>
        <p class="slds-truncate" title="Company Three"><a href="javascript:void(0);">Company Three</a></p>
        <p class="slds-truncate">Closing 10/12/2015</p>
      </div>
    </div>
  </li>
</ul>

Component Overview

Tiles are setup to be displayed with or without an image/icon. The default pattern for tiles has an image/icon, a detail body which contains a list of information and action overflow menu dropdown. The detail body list, by default, comes as a name/value pairing but can be swapped out with a string of text or an inline horizontal list.

Tiles can have different groupings of information based on its context. Pay close attention to the markup, as each tile layout is constructed differently.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-tile
Applied to:

<div>

Outcome:

Initializes tile

Required:

Required

Comments:

--

.slds-tile__detail
Applied to:

<div> or <ul>

Outcome:

Required:

Required

Comments:

--

.slds-tile__meta
Applied to:

Any element inside .slds-tile__detail

Outcome:

Applies text color change

Required:

No, optional element or modifier

Comments:

--

.slds-media
Applied to:

.slds-tile

Outcome:

Layout helper that aligns image and text

Required:

No, optional element or modifier

Comments:

Use on tiles with Icons, Actions and Badges

.slds-media__body
Applied to:

<div>

Outcome:

Layout helper

Required:

No, optional element or modifier

Comments:

Wraps .slds-tile__title and .slds-tile__detail inside a .slds-media object.

.slds-truncate
Applied to:

Outcome:

Applies overflow truncation to tile detail items

Required:

No, optional element or modifier

Comments:

Can be applied to anything that needs truncation

.slds-list--horizontal
Applied to:

<ul>

Outcome:

Horizontally aligns list items

Required:

No, optional element or modifier

Comments:

--

.slds-has-dividers--right
Applied to:

.slds-list--horizontal

Outcome:

Adds dotted dividers in a horizontal list

Required:

No, optional element or modifier

Comments:

--

.slds-grid
Applied to:

Outcome:

Initializes a grid layout

Required:

No, optional element or modifier

Comments:

Wrap .slds-tile__title and icon/badge element

.slds-grid--align-spread
Applied to:

.slds-grid

Outcome:

Spreads the elements on each end of the same axis

Required:

No, optional element or modifier

Comments:

--

.slds-has-flexi-truncate
Applied to:

.slds-col

Outcome:

Layout helper applied to a parent .slds-grid when .slds-truncate is within a flex element

Required:

No, optional element or modifier

Comments:

--

.slds-hint-parent
Applied to:

.slds-tile

Outcome:

Highlights dimmed action overflow icons on tile hover

Required:

No, optional element or modifier

Comments:

--