Coach Stories

Rail layout

The page's two columns: a 200px rail and the content. Anything that should line up with the grid sits in it, even with an empty rail. The rail sticks while the content scrolls.

components/coach/blocks/rail-layout.tsx

Preview

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

Built from

Anatomy

  1. 01Page margin: 16px mobile, 24px desktop
  2. 02Rail: 200px
  3. 03Gap: 32px
  4. 04Content: four columns, 8px gutter

Usage

components/coach/blocks/rail-layout.tsx
import { RailLayout } from "@/components/coach/blocks/rail-layout";

<RailLayout intro={<SectionIntro … />} rail={<CategoryNav … />}>
  <StoryGrid items={items} />
</RailLayout>

Props

PropTypeDefaultDescription
introReactNode—The heading row, set in the content column.
railReactNode—The left rail on desktop; above the content on mobile.
children*ReactNode—The content column.
classNamestring—Merged last. For spacing around the block, not for restyling it.

Where it's used