Hero

Composition-first hero layout for campaign landings, collection openers, and editorial storefront moments. The root owns layout and spacing while child slots own content structure.

Best for

campaign landingscollection openersbrand storytelling

Import

import { Hero } from "@enadhq/enad-react-sdk/client/storefront"

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

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.

Examples

Live examples you can edit directly in the sandbox.

3 examples

Browse-opening hero

Use the existing Hero family for category and collection openings by adding supporting metadata and directional navigation inside the content stack.

Split hero with structural control

Keep the same content slots while changing the macro layout with split controls and media ordering.

Minimal text-first hero

Use the same content slots without media when the page should open editorially rather than visually.

Component Sets

Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.

Props

Prop	Type	Default	Description
children	string	—	Composition-first hero content assembled from child slots such as `Hero.Media`, `Hero.Content`, `Hero.Meta`, `Hero.Subnav`, and `Hero.Overlay`
aspectRatio	string	"16:9"	Aspect ratio of the hero container (overlay and image-only layouts)
preset	string	—	Convenience preset for common storefront Hero compositions. Consumers can still override the resolved layout and spacing props directly.
layout	string	"overlay"	Visual layout variant of the hero
contentPosition	string	"bottom-center"	Position of the content block within the hero (overlay layout only)
contentWidth	string	"md"	Max-width constraint applied to the full Hero content stack
contentSpacing	string	"default"	Controls the gap between the Hero copy stack and the CTA row
contentInset	string	"md"	Controls the branded inset around overlay and split content regions
mediaPosition	string	"start"	Which side the media sits on in split layouts
splitRatio	string	"1/2"	Relative share reserved for the media area in split layouts
stackAt	string	"lg"	Breakpoint where split layouts stop stacking and become multi-column. Use "never" to keep the split active at all sizes.
mobileContentOrder	string	"media-first"	Ordering of content vs media while the split layout is stacked on smaller screens
textAlign	string	—	Overrides the derived text alignment within the content block
colorTheme	string	—	Background and text color theme applied to the section
classNames	string	—	Slot-level class overrides for layout-specific brand styling without replacing the Hero block
className	string	—	No description yet.