Coach Stories

Story image

A cropped photograph in one of three ratios. Inside a group it eases in by 3% on hover, slowly, the way a print is brought closer.

components/coach/story-image.tsx

Examples

A runway look: a silver jacket and a tan barrel bag
Portrait, 4:5
Lil Buck outdoors against a blue sky, carrying a silver bag
Landscape, 5:4
A woman on a boat at dusk with a brown Tabby shoulder bag
Wide, 16:10

Usage

components/coach/story-image.tsx
import { StoryImage } from "@/components/coach/story-image";

<StoryImage
  aspect="portrait"
  image={{ src: "/images/stories/runway-fall-2026.jpg", alt: "…", focus: "50% 30%" }}
  sizes="(min-width: 1024px) 20vw, 50vw"
/>

Props

PropTypeDefaultDescription
image*{ src: string; alt: string; focus?: string }—focus is a CSS object-position, for where the crop should hold.
aspect*"portrait" | "landscape" | "wide"—4:5, 5:4 or 16:10. The grid uses the first two; wide is for heroes and bands.
sizes*string—Match it to the columns the image spans, so next/image fetches the right width.
priorityboolean—For images above the fold.
classNamestring—Merged last, so it can override layout. Keep brand styling in the component.

Guidance

Do

  • Crop to the two grid ratios, and let the row stay ragged.
  • Set focus when a face would be cropped.

Don't

  • Round corners, add borders or overlay text in the grid.

Where it's used