Gallery

Design a tile component for a grid-based interface. Each tile should feel like a discrete unit with a clear boundary, a compact content hierarchy, and a consistent rhythm across the layout. Use it for a dashboard, catalog, or media browser where users scan multiple items at once.

Define what lives inside the tile: a primary label, one supporting line, and one optional metadata element such as a count, status, or timestamp. Include a visual anchor like an icon, thumbnail, or color block so the tile can be identified quickly without reading everything.

Build three tile variants: standard, wide, and featured. The featured tile should carry more weight through size or media treatment, not through extra decoration. Keep the grid aligned so mixed sizes still feel orderly.

Show interaction states for default, hover, selected, and loading. Hover should suggest clickability; selected should hold focus clearly; loading should preserve the tile shape so the layout does not jump. Keep spacing and typography tight enough for dense layouts, but leave enough breathing room that the grid stays easy to scan.