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 class="slds-truncate" title="7 Members">7 Members</p>
    </lightning:tile>
</aura:component>

To insert an icon or avatar, pass it into the media attribute. 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 class="slds-dl--horizontal">
            <dt class="slds-dl--horizontal__label">
                <p class="slds-truncate" title="Company">Company:</p>
            </dt>
            <dd class="slds-dl--horizontal__detail slds-tile__meta">
                <p class="slds-truncate" title="Salesforce">Salesforce</p>
            </dd>
            <dt class="slds-dl--horizontal__label">
                <p class="slds-truncate" title="Email">Email:</p>
            </dt>
            <dd class="slds-dl--horizontal__detail slds-tile__meta">
                <p class="slds-truncate" title="salesforce-ux@salesforce.com">salesforce-ux@salesforce.com</p>
            </dd>
        </dl>
    </lightning:tile>
</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 that will be applied to the outer element. This style is in addition to base classes associated with the component.
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.