Tiles and cards are the primary surface on which we display content, often providing an overview of several different statistics within a report. They also support progressive disclosure, by allowing users to drill-down into more data on click, opening up a card with more detailed statistics.
Tiles vary a lot in terms of content depending on what statistics they show, but in general they will always have at least a title, with the rest of the remaining space being used to feature one or more KPIs (e.g. Overall Score, Response Rate etc).
https://invis.io/N7ZBLDS8CR3#/430716369_Tile_-_Anatomy
https://invis.io/GCZBL724RBE#/436747998_Tile_-_Specs
Due to the limited space, empty states and error states are handled with just an icon and a generic subtitle. More details on why the tile is empty or why an error occurred can be provided inside of the expanded card where we will show a vertical placeholder box with more explanatory text.
https://invis.io/MHZBLC7BY7E#/436751719_Tile_-_Content_Types
Subtitles should fit on a single line or otherwise be truncated, but longer titles can sometimes break on two lines but never more. On the edge case that titles are even longer, they should also be truncated. The area available for the featured KPIs (marked below in red) should fill any of the remaining space.
https://invis.io/MVZBLFEBAF6#/436747999_Tile_-_Content_Scaling
Tiles can be dragged and dropped for repositioning within their grid, and also clicked in order to open up into a card. To signal when a tile is openable, we "lift it" on hover by increasing its elevation from base to low. If the tile is already open (i.e. it's already showing the card) then the elevation will no longer change on hover and instead we will show an arrow pointing downwards to the card.