Tile

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.

To insert an icon or avatar, pass it into the media slot. 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.

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.

You can add a dropdown menu with actions to a tile. To find out which sections are active, use the actiontriggered event.

Use the detail property to return the action that was triggered.

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 do not stretch well, so to use available horizontal space, add a column of tiles. On wider screens where more than 2 columns of tiles will appear, tile lists should elegantly and responsively expand into tables.

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

This component has usage differences from its Aura counterpart. See Base Components: Aura Vs Lightning Web Components in the Lightning Web Components Developer Guide.

actiontriggered

The event fired when an action on the dropdown menu is triggered.

The actiontriggered event returns the following parameter.

The event properties are as follows.