09 • Patterns · Tile

Tile

Compact surface card for grids of sites, assets, or kpis. Supports metric, status indicator, link or click behavior. Interactive tiles hover-elevate with border accent.

Non-interactive (informational)

Total sites
264
BR + US
Active workers
4,128
Last shift
Incidents MTD
−42%
YoY

Accessibility

  • Status dot has aria-hidden (decorative); status label readable by SR.
  • aria-label combines status + label ("Status: Critical").
  • Interactive tiles render as <a> (href) or <button> (onClick) — native keyboard nav.
  • Non-interactive tiles render as <article> — semantic section.
  • Focus ring 3px on interactive variants (global WCAG 2.2 spec).