syntheticnew

FeatureShowcase

One feature row: an eyebrow, a headline and a body beside a piece of media.

Feature rowText beside a device, stacking on narrow screens

Offline

Works on the depot floor

Tasks sync on the device and catch up when the signal returns.

Tasks

Logo shortlist

Maya Chen

Offline sync

Jonas Weber

Reversed

Inbox

Quiet by default

One digest a day.

Inverse band

Rota

Every shift covered

In context

Product pageTwo rows alternating sides

Offline

Works on the depot floor

Tasks sync on the device and catch up when the signal returns.

Tasks

Logo shortlist

Maya Chen

Offline sync

Jonas Weber

Reminders

Nothing slips through

Reminders

Logo shortlist

Maya Chen

Offline sync

Jonas Weber

Props

Prop	Type	Required	Default
`eyebrow`	`string \| undefined`	No	—
`title`	`string`	Yes	—
`body`	`ReactNode`	No	—
`media`	`ReactNode`	Yes	—
`reverse`	`boolean \| undefined`	No	false
`tone`	`"default" \| "inverse" \| undefined`	No	default
`headingLevel`	`2 \| 3 \| undefined`	No	2

Layout

Text and media stack on narrow screens with the text first, so DOM, reading and visual order agree. From 768px up they sit side by side; reverse moves the media to the other side at that width only. tone="inverse" gives a dark band from --rebar-color-bg-inverse and --rebar-color-text-inverse.

Accessibility

A real <section> with a real heading (headingLevel 2 by default, 3 when nested). Pass your own aria-labelledby for a named landmark. The media slot is ordinary content, so a screenshot keeps its alt text.

data-rebar-* attributes

data-rebar-component="feature-showcase", data-rebar-tone and data-rebar-reverse on the root; data-rebar-part values text, media, eyebrow, title and body.

Migrating to Ant Design

Not codemod-covered. The nearest Ant Design shape is a Row with two Cols, a structural rewrite. The feature-showcase placement block prints this component from plain data.