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

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

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