APPENDIX D

Contact Sheet

The one list that carries imagery. Rows lift their thumbnail and press.

HANDLE: contact-sheet
LIVES IN: src/components/Editorial.jsx (ContactRow)
USED ON: Home, the seven chapters
PROPS: Thumbnail · number · title · client · outcome line · year · arrow, in the dot-leader pattern

EXAMPLE

LIVE

As it renders.

01Three Eras of Sourcingsupplyframe · dsi2023–present
Seven ranked price sources, one costing module, three eras · now the most actively developed area of the platform
02XactFlexxactflex2019–2022
~90s draw decisions · 38% fewer payment-status support calls

CODE

COPY AND PASTE

How it is called.

JSX

import { ContactRow } from '../components/Editorial.jsx'

<ul>
  {PROJECTS.map((p, i) => (
    <ContactRow key={p.slug} project={p} thumb={firstStill(p)} index={i} />
  ))}
</ul>

RULES

What must stay true.

The one list that carries imagery. Rows lift their thumbnail and press.

EXAMPLESCONTACT SHEET

CODE

JSX

import { ContactRow } from '../components/Editorial.jsx'

<ul>
  {PROJECTS.map((p, i) => (
    <ContactRow key={p.slug} project={p} thumb={firstStill(p)} index={i} />
  ))}
</ul>