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