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