Coach Stories

Story card

The unit of the hub. Image first, then category, title and a three-line excerpt. The whole card is one link; a text card also carries its CTA.

components/coach/story-card.tsx

Examples

A runway look: a silver jacket and a tan barrel bag

Runway

The Fall 2026 Runway Collection

Soft shapes, hard shine. Metallic outerwear meets suede bags made to be carried every day, and the details that made the show are the ones you can take home.

Portrait
Lil Buck outdoors against a blue sky, carrying a silver bag

Guides

How to Style Bags with Chain Accents

A chain strap changes how a bag sits and how it catches the light. Three ways to wear one, from a short shoulder drop to a long crossbody, and what to wear with each.

Landscape
Text, ruled, with its CTA
Excerpt never, as on mobile
Large, two columns wide

Anatomy

  1. 01Story image
  2. 02Eyebrow, 14px below
  3. 03Title, 53 Extended 15px
  4. 04Excerpt, Helvetica 12px, graphite, three lines
  5. 05CTA, text cards only

Usage

components/coach/story-card.tsx
import { StoryCard } from "@/components/coach/story-card";

<StoryCard story={story} aspect="portrait" sizes="(min-width: 1024px) 20vw, 50vw" />
<StoryCard story={story} aspect="text" />                  // ruled, no image
<StoryCard story={story} aspect="landscape" size="large" />  // spans two columns

Props

PropTypeDefaultDescription
story*Story—From lib/content: category, title, excerpt, href, image, cta.
aspect"portrait" | "landscape" | "wide" | "text""portrait"The image crop, or text for a ruled card with no image.
size"default" | "large""default"Large for cards that span two columns; the text column narrows to 75%.
excerpt"always" | "desktop" | "never""desktop"Excerpts show from desktop up; mobile cards are image, eyebrow and title.
sizesstring"(min-width: 1024px) 22vw, 50vw"Passed to the image.
priorityboolean—For the first row.
classNamestring—Merged last, so it can override layout. Keep brand styling in the component.

Guidance

Do

  • Let the title wrap to three or four lines; it is set to balance.
  • Use text cards to break up a row of pictures.

Don't

  • Put two text cards in one row.
  • Add a date or reading time. The hub is not a feed.

Where it's used