Hero Bento

stable

Contained bento-style hero (~640px tall). Cream text tile + right-column photo, with up to three gold proof-point badges. Optional second photo stacks below the hero; otherwise the hero photo fills the full right column.

Live Preview

2026–2027 SEASON

WHERE COLLEGE COACHES SCOUT NEXT.

Three showcases per year. NCSA-published feeds for every fixture. 180+ college programs in attendance last cycle.

View showcases

180+

College programs

tsx

<HeroBento
  eyebrow="2026–2027 SEASON"
  headline="WHERE COLLEGE COACHES SCOUT NEXT."
  description="Three showcases per year. NCSA-published feeds for every fixture. 180+ college programs in attendance last cycle."
  ctaLabel="View showcases"
  ctaHref="/showcases"
  heroImage="https://images.unsplash.com/photo-1551958219-acbc608c6377?w=1400&q=85"
  badges={[
    {
      "value": "180+",
      "label": "College programs"
    }
  ]}
/>

Controls

Eyebrow

eyebrow

Headline

headline

Description

description

CTA Label

ctaLabel

CTA URL

ctaHref

Badges

badgeCount

How many badges to render (max 3).

Sub Image

showSubImage

false

When off, hero photo spans the full right column.

Hero Image

heroImage

Sub Image URL

subImage

Props

Prop	Type	Default	Description
`eyebrow`	`string`	`"2026–2027 SEASON"`	Small uppercase label above the headline.
`headline`	`string`	`"WHERE COLLEGE COACHES SCOUT NEXT."`	Main headline rendered in Barlow Condensed.
`description`	`string`	`—`	Supporting paragraph (32px gap below headline).
`ctaLabel`	`string`	`"View showcases"`	Pill button label, anchored to the bottom of the cream tile.
`ctaHref`	`string`	`"/showcases"`	Pill button destination.
`heroImage`	`string`	`—`	Right-column photo. Spans both rows when subImage is omitted.
`subImage`	`string`	`—`	Optional second photo stacked below the hero. Omit for a single full-height photo.
`badges`	`HeroBentoBadge[]`	`—`	Up to 3 gold proof-point badges anchored top-right. Each: { value, label? }. On mobile they reflow into a full-width grid strip across the bottom of the photo.