Coach Stories
Feature hero
The lead story full bleed to the page margins, its title set on the photograph, with a rail of two stories beside it. The rail wraps underneath on mobile.
components/coach/blocks/feature-hero.tsx
Preview
Live, on the prototype's content. Switch to mobile to see it at 390px.
1440pxOpen
Built from
Usage
import { FeatureHero } from "@/components/coach/blocks/feature-hero";
<FeatureHero story={heroStory} rail={[storyA, storyB]} caption="Shop the look" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| story* | Story | — | The lead. Its image should hold a 16:10 crop on desktop and 4:5 on mobile. |
| rail | Story[] | [] | Up to two stories beside the hero, one column wide. |
| caption | string | — | A small caps label in the bottom right of the image. |
| className | string | — | Merged last. For spacing around the block, not for restyling it. |
Guidance
Do
- Keep the headline to two lines at desktop.
- Check the gradient keeps white text readable on the chosen image.
Don't
- Use a product packshot. The hero is always campaign photography.