DocsDocsSDKs

Hero

React SDK guidance for Hero.

Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

When to use it

Use Hero when a page opener needs shared layout rules but brand-owned structure.

That is the key distinction:

  • the root owns layout, spacing, overlay behavior, split ratios, stacking, and themed shell styling
  • the child slots own the content anatomy

This now includes browse-opening structure such as supporting metadata and directional sub-navigation. If a collection or category page needs that shape, evolve Hero with Hero.Meta and Hero.Subnav instead of creating a parallel CollectionHero export.

Composition model

Hero is composition-first:

  • Hero.Media wraps the media region
  • Hero.Image gives you the default image primitive for the media slot
  • Hero.Content wraps the copy/action region and inherits layout-aware alignment
  • Hero.Eyebrow, Hero.Heading, and Hero.Body are styled content primitives
  • Hero.Meta is the supporting metadata row for result counts, trust notes, or small browse context
  • Hero.Subnav is the supporting region for directional navigation, often used with QuickLinks
  • Hero.Actions is the CTA row container
  • Hero.Overlay lets you add custom overlay-layer content on top of the default gradient treatment

The root accepts layout props:

  • layout — overlay, split, minimal, banner, image-only
  • preset — shortcut aliases like center-bottom, left-top, horizontal, and single-img
  • contentPosition, contentWidth, contentSpacing, contentInset
  • mediaPosition, splitRatio, stackAt, mobileContentOrder
  • colorTheme and classNames for shell-level styling control

Own the structure, keep the shell shared

If a storefront needs browse metadata, jump links, inline badges, or extra supporting copy, put that inside Hero.Content with Hero.Meta and Hero.Subnav instead of asking for a new one-off hero family.

Behavior and theming guidance

Overlay and banner variants still rely on the overlay CSS variables for contrast, so test with both light and dark imagery.

Use layout props for macro structure:

  • choose layout, splitRatio, mediaPosition, and stackAt to define the frame
  • use contentPosition, contentWidth, contentSpacing, and contentInset to tune the copy region
  • use classNames for shell-level polish, not for inventing new content anatomy

Use child slots for actual composition:

  • add or remove supporting body copy
  • insert browse metadata with Hero.Meta
  • place directional navigation in Hero.Subnav
  • reorder or vary actions
  • omit media entirely for minimal

If a page only needs an image, use layout="image-only" and render just Hero.Media.

Contract scope

  • Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
  • Public import: @enadhq/enad-react-sdk/client/storefront.
  • Playground route: /sandbox?component=Hero.
  • Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes

Hero

# Hero > Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe. Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior. ## Playground - Import path: `@enadhq/enad-react-sdk/client/storefront`. - Live playground: [/components/storefront/hero](https://sdk.enad.io/components/storefront/hero). ## When to use it Use `Hero` when a page opener needs **shared layout rules** but **brand-owned structure**. That is the key distinction: - the **root** owns layout, spacing, overlay behavior, split ratios, stacking, and themed shell styling - the **child slots** own the content anatomy This now includes browse-opening structure such as supporting metadata and directional sub-navigation. If a collection or category page needs that shape, evolve `Hero` with `Hero.Meta` and `Hero.Subnav` instead of creating a parallel `CollectionHero` export. ## Composition model `Hero` is composition-first: - **`Hero.Media`** wraps the media region - **`Hero.Image`** gives you the default image primitive for the media slot - **`Hero.Content`** wraps the copy/action region and inherits layout-aware alignment - **`Hero.Eyebrow`**, **`Hero.Heading`**, and **`Hero.Body`** are styled content primitives - **`Hero.Meta`** is the supporting metadata row for result counts, trust notes, or small browse context - **`Hero.Subnav`** is the supporting region for directional navigation, often used with `QuickLinks` - **`Hero.Actions`** is the CTA row container - **`Hero.Overlay`** lets you add custom overlay-layer content on top of the default gradient treatment The root accepts layout props: - **`layout`** — `overlay`, `split`, `minimal`, `banner`, `image-only` - **`preset`** — shortcut aliases like `center-bottom`, `left-top`, `horizontal`, and `single-img` - **`contentPosition`**, **`contentWidth`**, **`contentSpacing`**, **`contentInset`** - **`mediaPosition`**, **`splitRatio`**, **`stackAt`**, **`mobileContentOrder`** - **`colorTheme`** and **`classNames`** for shell-level styling control > **Own the structure, keep the shell shared** > > If a storefront needs browse metadata, jump links, inline badges, or extra supporting copy, put that inside `Hero.Content` with `Hero.Meta` and `Hero.Subnav` instead of asking for a new one-off hero family. ## Behavior and theming guidance Overlay and banner variants still rely on the overlay CSS variables for contrast, so test with both light and dark imagery. Use layout props for **macro structure**: - choose `layout`, `splitRatio`, `mediaPosition`, and `stackAt` to define the frame - use `contentPosition`, `contentWidth`, `contentSpacing`, and `contentInset` to tune the copy region - use `classNames` for shell-level polish, not for inventing new content anatomy Use child slots for **actual composition**: - add or remove supporting body copy - insert browse metadata with `Hero.Meta` - place directional navigation in `Hero.Subnav` - reorder or vary actions - omit media entirely for `minimal` If a page only needs an image, use `layout="image-only"` and render just `Hero.Media`. ## Contract scope - Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior. - Public import: `@enadhq/enad-react-sdk/client/storefront`. - Playground route: /sandbox?component=Hero. - Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference. ### Implementation notes