Tiles are used to display context information to help user complete a task or act as an entry point for more detail. They can also be used to display a list of loosely connected options to help the user gather information quickly at a glance.
Tile component can be used by itself or inside a
TileStack. Content is passed to the tile as
The tile component does not have an opinion on how text is rendered, it is the consumers responsibility.
A tile will fill the container it's in so it's the consumer's responsibility to allocate containers with approriate widths and heights.
The interactivity of a tile depends on whether it's displaying contextual information or acting as an entry point for a more detailed interaction.
By default tiles are not interactive. The
href props can be used to make them behave interactively.
When a tile is interactive, the entire tile surface responsds to hover/active events. In addition to that, the
Tile.InteractiveText primitive can be used inside the tile
to responsd to these events.
For convenience, the
InteractiveText component takes all the props a normal
Text component does. See below examples on how to compose a tile using
onClick prop makes the entire tile surface a clickable target.
href prop makes the entire tile surface a clickable target.
A link tile supports all the usual anchor props. For example the
A tile can either be clickable or be a link, not both.
The density of a tile is defined as the white space between the border and the content area. It's set through the
density prop and supports three values:
The default density of a tile is regular.
All tiles in a stack should have the same density.
A group of related tiles can be renderred together inside a
Interactive tiles can also be used in a