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.

Here's an example.

lightning-tile implements the tiles blueprint in the Salesforce Lightning Design System (SLDS). The tiles adapt to SLDS 1 or SLDS 2 styling based on the org's theme or the container app that you use.

To insert an icon or avatar, pass it into the media slot. You can create a tile with an icon by using definition lists. This example aligns an icon and some text by using utility classes like slds-dl_horizontal.

You can also create a list of tiles with avatars by using an unordered list. This example places tiles in a list and creates dividers by 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 selected action.

Use a combination of tile types and utility classes to customize the tile.

Specify the type attribute with one of these values.

• standard is the default type, which shows a tile without an image or icon
• media shows a tile with an image or icon that's passed into slot="media"

To style the tile body, use the Lightning Design System utility classes.

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’re 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 don't stretch well, so to use available horizontal space, add a column of tiles. On wider screens where more than 2 columns of tiles appear, tile lists responsively expand into tables.

Icons aren't available in Lightning Out, but they're 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.