tiles

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">

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">

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">

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">

Task

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

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">

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">

Board

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