Hero230

1.0.0

Centered marketing hero with a pill kicker, dual pill CTAs, an auto-scrolling logo ticker, and an autoplay filmstrip of raised image cards.

npx jabkit add hero230

Component Data

ID: hero230
Category: marketing
Version: 1.0.0
Added: 2026-09-01
Type: block
Keyboard nav: Yes
Reduced motion: Yes

heromarketingcarouselmarqueefilmstripctalogoslanding

Dependencies

clsx
tailwind-merge

Examples

Default

<Hero230
      kicker={hero230Mocks.kicker}
      title={hero230Mocks.title}
      description={hero230Mocks.description}
      primaryAction={hero230Mocks.primaryAction}
      secondaryAction={hero230Mocks.secondaryAction}
      logos={hero230Mocks.logos}
      slides={hero230Mocks.slides}
    />

Variants

<Hero230
      kicker={hero230EditorialMocks.kicker}
      title={hero230EditorialMocks.title}
      description={hero230EditorialMocks.description}
      primaryAction={hero230EditorialMocks.primaryAction}
      secondaryAction={hero230EditorialMocks.secondaryAction}
      logos={hero230EditorialMocks.logos}
      slides={hero230EditorialMocks.slides}
      autoplay={hero230EditorialMocks.autoplay}
    />