APPENDIX D

Prototype Plate

The only gradient on the site.

HANDLE: prototype-plate
LIVES IN: src/components/Ornaments.jsx (PROTOTYPE_GROUND), ProjectArtifacts.jsx, Home.jsx
USED ON: Home frontispiece, chapter artifacts
PROPS: A Plate with style={{ background: PROTOTYPE_GROUND }} holding a live prototype

EXAMPLE

LIVE

As it renders.

Step 1 of 4Payment method

Where should we pull from?

This is the bank account associated with your loan. To change it, contact Customer Service.

Bank Account

ACH Checking · ••• 1234

Need to change accounts? Call Customer Service before scheduling a payment.

CODE

COPY AND PASTE

How it is called.

JSX

import { Plate, PROTOTYPE_GROUND } from '../components/Ornaments.jsx'
import PaymentUI from '../components/PaymentUI.jsx'

<Plate className="overflow-hidden px-6 py-10" style={{ background: PROTOTYPE_GROUND }}>
  <div className="mx-auto" style={{ zoom: 0.7, maxWidth: 420 }}>
    <PaymentUI />
  </div>
</Plate>

RULES

What must stay true.