---
schema_version: "1"
id: b25668ccab44a3c75e86640560db96453f62d42656b55ef8664130cbaf788fc6
title: Tile
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/lwc/components/lightning/tile/lightning-tile.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-tile.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 897bc98447c46fa5f979d325aba74b3f266dcf91370588009b868426c3773d35
products:
  - Lightning Component Reference
---

# Tile

**`lightning-tile`**

A grouping of related information associated with a record.

**For Use In**

Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App, Mobile Offline

::::::tabset{tabs='["Example", "Develop", "Specifications"]'}

:::::tab

::component-playground{component="tile" model="lwc" namespace="lightning"}


:::::

:::::tab

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.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-tile label="Lightning component team" href="/path/to/somewhere">
        <p class="slds-truncate" title="7 Members">7 Members</p>
    </lightning-tile>
</template>
```
<!-- prettier-ignore-end -->

## Design

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

|                | SLDS 1                                                                                                                                | SLDS 2                                                                                                          |
| :------------- | :------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------- |
| **Design**     | [Tiles](https://v1.lightningdesignsystem.com/components/tiles/)                                                                       | [Tiles](https://www.lightningdesignsystem.com/components/tiles/)                                                |
| **For Use In** | Lightning Experience, Experience Builder sites, Salesforce mobile app, Lightning Out (Beta), Standalone Lightning app, Mobile Offline | [Lightning Experience](https://help.salesforce.com/s/articleView?id=xcloud.customize_ui_enhancedlex.htm&type=5) |

## Usage

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

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-tile label="Salesforce UX" href="/path/to/somewhere" type="media">
        <span slot="media">
            <lightning-icon
                icon-name="standard:groups"
                alternative-text="Groups"
            >
            </lightning-icon>
        </span>
        <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>
</template>
```
<!-- prettier-ignore-end -->

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

<!-- prettier-ignore-start -->
```html
<template>
    <ul class="slds-has-dividers_bottom-space">
        <li class="slds-item">
            <lightning-tile
                type="media"
                label="Astro"
                href="/path/to/somewhere"
            >
                <span slot="media">
                    <lightning-avatar
                        src="/path/to/img"
                        alternative-text="Astro"
                        fallback-icon-name="standard:person_account"
                    >
                    </lightning-avatar>
                </span>
                <ul class="slds-list_horizontal slds-has-dividers_right">
                    <li class="slds-item">Trailblazer, Salesforce</li>
                    <li class="slds-item">Trailhead Explorer</li>
                </ul>
            </lightning-tile>
        </li>
        <!-- More list items here -->
    </ul>
</template>
```
<!-- prettier-ignore-end -->

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

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-tile
        label="My Open Cases"
        href="/path/to/my-open-cases"
        actions={actions}
        onactiontriggered={handleAction}
    >
        <p class="slds-truncate" title="10 Cases">10 Cases</p>
    </lightning-tile>
</template>
```
<!-- prettier-ignore-end -->

Use the `detail` property to return the selected action.

```javascript
import { LightningElement, track } from "lwc";

export default class DemoTileAction extends LightningElement {
  @track actions = [
    { label: "Edit", value: "edit", iconName: "utility:edit" },
    { label: "Delete", value: "delete", iconName: "utility:delete" },
  ];

  handleAction(event) {
    // Get the value of the selected action
    const tileAction = event.detail.action.value;
  }
}
```

## Component Styling

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

### Tile Types

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"`

### Utility Classes

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

## Design Guidelines

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.

## Usage Considerations

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](https://developer.salesforce.com/docs/platform/lwc/guide/migrate-map-aura-lwc-components) in the Lightning Web Components Developer Guide.

## Custom Events

**`actiontriggered`**

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

The `actiontriggered` event returns the following parameter.

| Parameter | Type   | Description          |
| --------- | ------ | -------------------- |
| action    | object | The selected action. |

The event properties are as follows.

| Property   | Value | Description                                                                                               |
| ---------- | ----- | --------------------------------------------------------------------------------------------------------- |
| bubbles    | false | This event does not bubble.                                                                               |
| cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
| composed   | false | This event does not propagate outside the template in which it was dispatched.                            |


:::::

:::::tab
::component-specification{component="tile" model="lwc" namespace="lightning"}

:::::

::::::