lightning:tile

A grouping of related information associated with a record.

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. For example, providing the slds-tile_board class creates the board variant. To style the tile body, use the Lightning Design System helper classes.

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

Here is an example.

<aura:component>
    <lightning:tile label="Lightning component team" href="/path/to/somewhere">
        <p title="7 Members">7 Members</p>
    </lightning:tile>
</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 helper classes like slds-dl_horizontal.

<aura:component>
    <lightning:tile label="Salesforce UX" href="/path/to/somewhere">
        <aura:set attribute="media">
            <lightning:icon iconName="standard:groups"/>
        </aura:set>
        <dl>
            <dt>
                <p title="Company">Company:</p>
            </dt>
            <dd>
                <p title="Salesforce">Salesforce</p>
            </dd>
            <dt>
                <p title="Email">Email:</p>
            </dt>
            <dd>
                <p title="salesforce-ux@salesforce.com">salesforce-ux@salesforce.com</p>
            </dd>
        </dl>
    </lightning:tile>
</aura:component>

You can also create a list of tiles with avatars using an unordered list, as shown in this example.

<aura:component>
    <ul>
        <li>
            <lightning:tile  label="Astro" href="/path/to/somewhere">
                <aura:set attribute="media">
                    <lightning:avatar src="/path/to/img" alternativeText="Astro"/>
                </aura:set>
                <ul>
                    <li>Trailblazer, Salesforce</li>
                    <li>Trailhead Explorer</li>
                </ul>
            </lightning:tile>
        </li>
        <!-- More list items here -->
    </ul>
</aura:component>

Attributes

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