React Card Carousel
A horizontal slider of full-bleed image cards — an eyebrow, a headline, and a "Learn more" over a dark scrim on each. It uses native scroll-snap, so it swipes on touch and works without JavaScript for scrolling; the prev/next arrows and the pill-dot pagination below drive it and track position. Three cards show on desktop, fewer as the screen narrows. Drag it, or use the arrows and dots.
Ecosystem
A network of problem solvers
The Kelvin ecosystem is a vast collection of partner products, services, and solutions to address your most critical engineering challenges.
Explore the ecosystem
Engineering Group
Cutting-edge solutions across the industrial lifecycle
Learn more
Avasis
Your platinum partner for silicon design success
Learn more
Assurance Labs
Delivering software assurance for the Kelvin ecosystem
Learn more
Sim Partners
Digital twins for every production line
Learn more
PowerWorks
Energy-efficient designs, verified end to end
Learn more
GreenSilicon
Lower-carbon manufacturing at production scale
Learn moreInstallation
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | Section heading |
| eyebrow / subtitle | string | — | Kicker + intro paragraph |
| action | { label, href? } | — | Outline CTA under the header |
| cards | CarouselCard[] | — | { image?, eyebrow?, title, cta?, href? } |
Each card's image should be an <img className="absolute inset-0 h-full w-full object-cover"> so it fills the card behind the scrim and overlaid text.