React Tabbed Showcase
The content section you see on every large industrial homepage: a vertical list of topics on the left switches a featured story in the middle — a visual, an eyebrow, a headline, and a link — with two stacked side cards on the right: a dark "deep" card (for an e-book or whitepaper, with an electric-accent link) and a light card (for a product spotlight). An optional promo banner closes the section. Click through the topics on the left to swap all the content at once.
Technology
Engineered for what's next
From the sensor edge to the data center, our silicon and tools move you from prototype to production — safely, efficiently, and at scale.
Customer story
On-device inference at the sensor edge
A precision-agriculture startup runs crop-health models directly on the AXM-330 — no cloud round-trip, 40 ms latency in the field.
Read customer storyE-book
Industrial AI reference architecture
Move models from the data center to the edge without re-training.
Download the e-bookProduct spotlight
AXM-330 AI SoC
Quad Cortex-A53 with a 4-TOPS NPU and hardware security. In production now.
View the part
AI offerings
Unlock smarter solutions with edge AI
Installation
Usage
The visual slot on each tab (and on the promo) accepts any node — an <img>,
or a live component like a Waveform or Gauge to show the product working.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | Section heading |
| eyebrow / subtitle | string | — | Kicker + intro paragraph |
| tabs | ShowcaseTab[] | — | { label, visual?, eyebrow?, title, description?, cta?, href?, cards?, promo? } |
| defaultIndex | number | 0 | Which tab is active first |
Everything is per-tab: the visual, the story, the cards, and the promo banner all belong to a ShowcaseTab, so switching tabs swaps the entire block. Each card is { eyebrow?, title, description?, cta?, href?, variant } — variant: "dark" for the deep card with the electric-accent link, "light" for the bordered card. Each promo is { eyebrow?, title, cta, href?, visual? } and renders as a deep-navy banner at the bottom of that tab.