Coach Stories

Story grid

Four columns on desktop, each row a mix of portrait, landscape and ruled text cards, top aligned so the row reads as a ragged line of pictures. Two columns on mobile, packed densely.

components/coach/blocks/story-grid.tsx

Preview

Live, on the prototype's content. Switch to mobile to see it at 390px.

1440pxOpen

Built from

Story card

Anatomy

018px gutter
0248px between rows on desktop, 40px on mobile
03First card, wide cards and text cards span both mobile columns

Usage

components/coach/blocks/story-grid.tsx

import { StoryGrid } from "@/components/coach/blocks/story-grid";

<StoryGrid
  items={[
    { story: runway, aspect: "portrait" },
    { story: campaign, aspect: "landscape" },
    { story: coffee, aspect: "text" },
    { story: soundtrack, aspect: "portrait", span: 2 },
  ]}
/>

Props

Prop	Type	Default	Description
items*	{ story: Story; aspect: Aspect \| 'text'; span?: 1 \| 2 }[]	—	In reading order. Make each desktop row add up to four columns.
priority	boolean	—	Loads the first four images eagerly, when the grid is above the fold.
className	string	—	Merged last. For spacing around the block, not for restyling it.

Guidance

Alternate portrait and landscape across a row.
Give each row at most one text card.

Don't