Tile
Introduction
A tile is a large, touch-friendly area that provides a small summary-like experience of a single target URL.
Light Tile
For tiles with a small amount of text (and maybe a graphic or two), you can simply wrap these elements in an anchor tag and refer to the Link pattern We refer to this kind of tile as a light tile.
Heavy Tile
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.
Working Examples
Experience the pattern in action on our companion eBay MIND Patterns examples website.
Best Practices
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.
Interaction Design
Light tiles inherit all interaction design from the Link Pattern.
For a heavy tile, do not apply cursor: pointer to 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.
Developer Guide
The section is not yet available.
Last updated
