Jump to Navigation
Skip to Content
Component Blueprints

Tiles

Lightning Component
  • HTML/CSS:Dev Ready
  • Web Component:True
  • Layout:Responsive

Sections

information

You are currently viewing a sandbox preview version of Spring ’20 | Go back to Summer ’20

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

Salesforce UX

First Label:
Description for first label
Second Label:
Description for second label

About Tile#

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.

Warning

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

Base#

Salesforce UX

First Label:
Description for first label
Second Label:
Description for second label
<div class="demo-only" style="width:30rem">
  <article class="slds-tile">
    <h3 class="slds-tile__title slds-truncate" title="Salesforce UX">
      <a href="javascript:void(0);">Salesforce UX</a>

Examples#

Default with actions#

Salesforce UX

First Label:
Description for first label
Second Label:
Description for second label
<div class="demo-only" style="width:30rem">
  <article class="slds-tile slds-hint-parent">
    <div class="slds-grid slds-grid_align-spread slds-has-flexi-truncate">
      <h3 class="slds-tile__title slds-truncate" title="Salesforce UX">

With icon#

Salesforce UX

First Label:
Description for first label
Second Label:
Description for second label
<div class="demo-only" style="width:30rem">
  <article class="slds-tile slds-media">
    <div class="slds-media__figure">
      <span class="slds-icon_container" title="description of icon when needed">

With avatar#

Lexee L. Jackson

First Label:
Description for first label
Second Label:
Description for second label
<div class="demo-only" style="width:30rem">
  <article class="slds-tile slds-media">
    <div class="slds-media__figure">
      <span class="slds-avatar slds-avatar_circle slds-avatar_medium">

Task#

<div class="demo-only" style="width:320px">
  <article class="slds-tile slds-media">
    <div class="slds-media__figure">
      <div class="slds-checkbox">

Article#

<div class="demo-only" style="width:320px">
  <article class="slds-tile">
    <h3 class="slds-tile__title 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>

Article with like bar#

<div class="demo-only" style="width:320px">
  <article class="slds-tile">
    <h3 class="slds-tile__title 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>

Board#

<div class="demo-only" style="width:320px">
  <ul class="slds-has-dividers_around-space">
    <li class="slds-item">
      <article class="slds-tile slds-tile_board">

Overview of CSS Classes#

Selector.slds-tile
Summary

Initializes tile

Supportdev-ready
Restrictarticle
VariantTrue
Selector.slds-card__tile
Summary

Use class if card consumes any form of a tile

Restrict.slds-tile
Selector.slds-tile__detail
Summary
Restrict.slds-tile div
Selector.slds-tile__meta
Summary
Restrict.slds-tile div

Tiles Release Notes