component

TuxPhotoGrid

Uniform image grid. Photo kind for research photography and project galleries (4:3, full color, optional caption + credit). Logo kind for partner / sponsor walls (1:1, grayscale by default, color on hover). Auto-fits columns to the viewport — `columns` is a target, not a hard limit.

canonical

Photo grid · 3-up

Items rendered with labeled gradient placeholders since this is the design system; in real consumers, pass src for each item.

  • Connected vehicle test trackTTI Photography · 2025
  • Site 04 · before/after studyHassan et al. · 2024
  • MovementLab · Q3 2025
  • Field crew · 12-county deployment
  • Symposium · 2025 keynote
  • Freight corridor · Houston segment
<TuxPhotoGrid :items="photoItems" :columns="3" />

photo grid · 4-up

Denser layout

  • Connected vehicle test trackTTI Photography · 2025
  • Site 04 · before/after studyHassan et al. · 2024
  • MovementLab · Q3 2025
  • Field crew · 12-county deployment
  • Symposium · 2025 keynote
  • Freight corridor · Houston segment

logo wall

Sponsor / partner / agency

Pass kind="logo". Square aspect, grayscale-by-default treatment, hover restores color. Captions are suppressed — the alt text carries the agency name.

aspect override

16:9 widescreen

Pass aspect="16/9" for cinematic layouts.

  • Connected vehicle test trackTTI Photography · 2025
  • Site 04 · before/after studyHassan et al. · 2024
  • MovementLab · Q3 2025

props

Props + item shape

  • items — array of { src?, alt?, caption?, credit?, tone?, href? }. Required.
  • kind — "photo" | "logo". Defaults to "photo".
  • columns — 2..6. Auto-fits to viewport.
  • aspect — "4/3" | "1/1" | "16/9" | "3/4". Defaults: 4/3 for photos, 1/1 for logos.
  • Items without src render labeled gradient placeholders for design mocks. Tone cycles maroon/gold/charcoal.
  • Items with href become clickable tiles with corner-drop hover.