Tile

lightning:tile

A grouping of related information associated with a record.

For Aura components only. For LWC development, use lightning-tile.

For Use In

Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App, Mobile Offline

A lightning:tile component groups related information associated with a record. The information can be actionable and paired with a figure, such as a lightning:icon or lightning:avatar component.

Use the class attributes to customize the styling. To style the tile body, use the Lightning Design System utility classes.

This component implements styling from tiles in the Lightning Design System.

Here is an example.

1<aura:component>
2  <lightning:tile label="Lightning component team" href="/path/to/somewhere">
3    <p class="slds-truncate" title="7 Members">7 Members</p>
4  </lightning:tile>
5</aura:component>

To insert an icon or avatar, pass it into the media attribute. You can create a tile with an icon using definition lists. This example aligns an icon and some text using utility classes like slds-dl_horizontal.

1<aura:component>
2  <lightning:tile label="Salesforce UX" href="/path/to/somewhere">
3    <aura:set attribute="media">
4      <lightning:icon iconName="standard:groups" />
5    </aura:set>
6    <dl class="slds-dl_horizontal">
7      <dt class="slds-dl_horizontal__label">
8        <p class="slds-truncate" title="Company">Company:</p>
9      </dt>
10      <dd class="slds-dl_horizontal__detail slds-tile__meta">
11        <p class="slds-truncate" title="Salesforce">Salesforce</p>
12      </dd>
13      <dt class="slds-dl_horizontal__label">
14        <p class="slds-truncate" title="Email">Email:</p>
15      </dt>
16      <dd class="slds-dl_horizontal__detail slds-tile__meta">
17        <p class="slds-truncate" title="salesforce-ux@salesforce.com">
18          salesforce-ux@salesforce.com
19        </p>
20      </dd>
21    </dl>
22  </lightning:tile>
23</aura:component>

You can also create a list of tiles with avatars using an unordered list. This example places tiles in a list and creates dividers using utility classes like slds-has-dividers_bottom-space.

1<aura:component>
2  <ul class="slds-has-dividers_bottom-space">
3    <li class="slds-item">
4      <lightning:tile label="Astro" href="/path/to/somewhere">
5        <aura:set attribute="media">
6          <lightning:avatar src="/path/to/img" alternativeText="Astro" />
7        </aura:set>
8        <ul class="slds-list_horizontal slds-has-dividers_right">
9          <li class="slds-item">Trailblazer, Salesforce</li>
10          <li class="slds-item">Trailhead Explorer</li>
11        </ul>
12      </lightning:tile>
13    </li>
14    <!-- More list items here -->
15  </ul>
16</aura:component>

Design Guidelines

A tile requires a label and can include a supporting icon or avatar, and additional elements. You interact with elements within the tile, such as buttons and links, not the tile as a whole. Data is presented as label-value pairs. The user interacts with elements within the tile, such as buttons and links, not the tile as a whole.

Use tiles when you are horizontally constrained for space. Tiles are appropriate for short lists, using a <ul> or <dl> for example, that are fewer than 10 items. Tile layouts don’t stretch well, so to use available horizontal space, add a column of tiles. On wider screens where more than two columns of tiles are used, tile lists should responsively expand into tables.

Usage Considerations

Icons are not available in Lightning Out, but they are available in Lightning Components for Visualforce and other experiences.

Attributes

Name	Description	Type
body	The body of the component. In markup, this is everything in the body of the tag.	Aura.Component[]
class	A CSS class for the outer element, in addition to the component's base classes.	String
href	The URL of the page that the link goes to.	String
label	The text label that displays in the tile and hover text.	String
media	The icon or figure that's displayed next to the textual information.	Aura.Component[]
title	Displays tooltip text when the mouse moves over the element.	String

Tile

Design Guidelines

Usage Considerations

Attributes

Lightning Component Reference

Contents