component

TuxMediaSlab

Full-bleed hero band — the "big photo moment". Edge-to-edge image, one headline, minimal copy. Use at the top of feature pages, between major sections, or as the first impression on a research- program landing. For a band of multiple cards, use TuxCardSlab.

canonical

Overlay · standard height

Field deployment

412 miles of continuously-instrumented freight corridor

The Texas Triangle's monitored network came online during Q3 2025. Real-time corridor data feeds both safety research and operational decisions.

<TuxMediaSlab
  eyebrow="Field deployment"
  title="412 miles of continuously-instrumented freight corridor"
  dek="The Texas Triangle's monitored network came online during Q3 2025. Real-time corridor data feeds both safety research and operational decisions."
  tone="maroon"
>
  <template #actions>
    <TuxButton intent="primary">Read the field report</TuxButton>
    <TuxButton intent="ghost">Watch the deployment video</TuxButton>
  </template>
</TuxMediaSlab>

split layout

Image left, copy right

Pass layout="split". Two columns at ≥60rem; stacks at narrower viewports. Use imageSide="left" or "right" to pick the photo placement.

Roadway safety

Twelve-county roadway treatment study

Compliance gains held steady through the 36-month follow-up window. Three of twelve treated sites also showed measurable reductions in late-night crashes.

heights

tall / standard / short

tall (32rem) for landing-page openers, standard (24rem, default) for between-section breaks, short (16rem) for inline hero accents.

Tall · 32rem

Landing-page opener

Short · 16rem

Inline hero accent

Brief headline, small section break.

props

Props reference

  • title — headline. Required.
  • src + alt — image. If omitted, renders a tone-keyed gradient placeholder.
  • eyebrow, dek — optional text rhythm.
  • layout — "overlay" | "split". Defaults to "overlay".
  • imageSide — "left" | "right". Split layout only.
  • height — "tall" | "standard" | "short".
  • tone — "maroon" | "gold" | "charcoal". Placeholder gradient tone.
  • #actions slot — buttons or link list below the dek.