component

TuxCardSlab

Full-bleed band of media-forward cards. The "browse our programs" / "explore the research" pattern — image-led cards with overlay title, optional eyebrow, whole-card click. Distinct from TuxPhotoGrid (caption-forward) and TuxNewsCollection grid (copy-forward) — this one is image-forward with minimal text.

canonical

Three programs · 4:5 portrait

Research

Browse our programs

  • Program

    Connected & Automated Vehicles

  • Program

    Roadway Safety

  • Program

    Mobility & Economics

<TuxCardSlab
  eyebrow="Research"
  heading="Browse our programs"
  :cards="programCards"
  :columns="3"
/>

aspect ratios

3:4 portrait / 4:5 / 1:1

Pick the aspect ratio that matches the source imagery and the density target — taller = more drama, square = more cards-per-row.

  • Program

    Connected & Automated Vehicles

  • Program

    Roadway Safety

  • Program

    Mobility & Economics

  • Program

    Connected & Automated Vehicles

  • Program

    Roadway Safety

  • Program

    Mobility & Economics

4-up

Four-card slab

Pass :columns="4" for "all programs" / "all centers" bands. Cards are tighter; consider 1:1 aspect to keep them readable.

All centers

  • Center

    Connected Vehicles

  • Center

    Transportation Safety

  • Center

    Mobility & Economics

  • Center

    Transportation Equity

props

Props + card shape

  • cards — array of { title, eyebrow?, image?, alt?, to?, href?, tone? }.
  • columns — 2 | 3 | 4. Defaults to 3.
  • aspect — "3/4" | "1/1" | "4/5". Defaults to "4/5".
  • heading + eyebrow — optional band header above the cards.
  • tone — placeholder gradient tone (cycles maroon/charcoal/gold).
  • to / href — internal/external link. Whole card becomes clickable with corner-drop hover + reveal arrow.