Carlos deArtola monogramCARLOS DE ARTOLA
APPENDIX D

Screens

Paper card and caption. Desktop and mobile siblings pair side by side.

HANDLE
screens
LIVES IN
src/components/ProjectArtifacts.jsx (ProjectScreens, Lightbox)
USED ON
Chapters without a prototype, Dashboards by brand
PROPS
screens: [{ src, caption }]
EXAMPLE
LIVE

As it renders.

SCREENS01 / 02
XactFlex: Account Summary · credit utilization at a glanceFIG. 01
XactFlex: Request a Draw · slider-driven amount inputFIG. 02
CODE
COPY AND PASTE

How it is called.

JSX
import { ProjectScreens } from '../components/ProjectArtifacts.jsx'

<ProjectScreens label="SCREENS" screens={[
  { src: '/dashboards/ameris-desktop.png', caption: 'Dashboard: desktop' },
  { src: '/dashboards/ameris-mobile.png', caption: 'Dashboard: mobile' },  {/* pairs beside its desktop sibling */}
]} />
RULES

What must stay true.

Paper card and caption. Desktop and mobile siblings pair side by side.