An eBay Deals card containing 4 tiles
A tile is a large, touch-friendly area that provides a small summary-like experience of a single target URL.
Updated: March 18th 2021
For tiles with longer text and structural elements such as lists, subheadings and tables, the contents cannot simply be wrapped in an anchor tag for fear of the link text becoming too verbose and unwieldy for assistive technology. We refer to this kind of tile as a heavy tile.
Tile can have one link destination only. Anything more than one link is considered a card.
Tile should have a solid outline to identify the touch region.
Light tile is simply an anchor wrapping the contents of the tile.
Light tile can not contain any interactive elements. This ensures that the tile is a single stop in the tab order.
Light tile must not contain long descriptive text or structural elements such as lists, tables and widgets.
Heavy tile must only contain one hyperlink and no other interactive elements. This ensures that the tile is a single stop in the tab order.
For a heavy tile, do not apply
cursor: pointerto the entire tile. This type of cursor (a little hand) should only appear over the actual link element so that users know where to right-click to copy the link or open in new tab, etc.
For a heavy tile, it is recommended to suppress the default focus indicator of the link inside the tile, and instead display a focus indicator around the entire tile. We discuss how to do this in the developer guide below.
The section is not yet available.