Tile

1<template>
2    <lightning-tile label="Lightning component team" href="/path/to/somewhere">
3        <p class="slds-truncate" title="7 Members">7 Members</p>
4    </lightning-tile>
5</template>

1<template>
2    <lightning-tile label="Salesforce UX" href="/path/to/somewhere">
3        <span slot="media">
4            <lightning-icon
5                icon-name="standard:groups"
6                alternative-text="Groups"
7            >
8            </lightning-icon>
9        </span>
10        <dl class="slds-dl_horizontal">
11            <dt class="slds-dl_horizontal__label">
12                <p class="slds-truncate" title="Company">Company:</p>
13            </dt>
14            <dd class="slds-dl_horizontal__detail slds-tile__meta">
15                <p class="slds-truncate" title="Salesforce">Salesforce</p>
16            </dd>
17            <dt class="slds-dl_horizontal__label">
18                <p class="slds-truncate" title="Email">Email:</p>
19            </dt>
20            <dd class="slds-dl_horizontal__detail slds-tile__meta">
21                <p class="slds-truncate" title="salesforce-ux@salesforce.com">
22                    salesforce-ux@salesforce.com
23                </p>
24            </dd>
25        </dl>
26    </lightning-tile>
27</template>

1<template>
2    <ul class="slds-has-dividers_bottom-space">
3        <li class="slds-item">
4            <lightning-tile
5                type="media"
6                label="Astro"
7                href="/path/to/somewhere"
8            >
9                <span slot="media">
10                    <lightning-avatar
11                        src="/path/to/img"
12                        alternative-text="Astro"
13                        fallback-icon-name="standard:person_account"
14                    >
15                    </lightning-avatar>
16                </span>
17                <ul class="slds-list_horizontal slds-has-dividers_right">
18                    <li class="slds-item">Trailblazer, Salesforce</li>
19                    <li class="slds-item">Trailhead Explorer</li>
20                </ul>
21            </lightning-tile>
22        </li>
23        <!-- More list items here -->
24    </ul>
25</template>

1<template>
2    <lightning-tile
3        label="My Open Cases"
4        href="/path/to/my-open-cases"
5        actions={actions}
6        onactiontriggered={handleAction}
7    >
8        <p class="slds-truncate" title="10 Cases">10 Cases</p>
9    </lightning-tile>
10</template>

1import { LightningElement, track } from "lwc";
2
3export default class DemoTileAction extends LightningElement {
4  @track actions = [
5    { label: "Edit", value: "edit", iconName: "utility:edit" },
6    { label: "Delete", value: "delete", iconName: "utility:delete" },
7  ];
8
9  handleAction(event) {
10    // Get the value of the selected action
11    const tileAction = event.detail.action.value;
12  }
13}