Tile generator
Search results, related lists and grid views often render each record as a lightning-tile. Style the media accent, hover lift and spacing so a list of tiles feels scannable rather than cramped.
Your changes autosave in this browser, and the link above reproduces this exact configuration for anyone you send it to.
Live preview
Generated code
<template>
<lightning-tile label="Acme Corp — Enterprise Deal" class="studio-tile">
<p slot="media" class="studio-tile__media"></p>
<p class="studio-tile__subtitle">Closing this quarter · $84,000</p>
</lightning-tile>
</template>Design tips for tiles
- Keep the media accent (icon or color swatch) consistent per record type so users learn to recognize types at a glance.
- Use a subtle hover lift only when the tile is actually clickable — otherwise it sets a false expectation.
- Keep subtitle text to one line; two-line subtitles break tile-grid alignment.