Feature Graphics Workbench

SquadSpot · features template

Feature graphics

Seventeen of these pages mirror the site exactly: the shot is the embed published in Webflow, rendered in the slot box measured on the live page. Zero are drafts built locally and not on the site yet — their tabs are dashed and each carries a banner. Drag, retype and hide in Design mode, on heroes as well as sections; Enlarge focuses a shot at working size with the library beside it. Four of the oldest heroes (workflow automation, membership management, digital membership cards, credential tracking) nest their whole composition in one block, so those move as a single piece until they are rebuilt. Member photos and vehicle photos are embedded here, so they show as they will on the site.

Feature graphics
MOTION Fit 100% positions not saved yet
Mirroring the embeds published 2026-09-24 08:01.
HHero1200×758
Annual Application Form 2028
Workflow automation · Active
RunningLogsPublish
Workflow runs
1,284
100% completed
Trigger
Application submitted
Form validated
Notify
Notify committee
3 recipients
Payment
Accept payment
$120 reconciled
Email
Send confirmation
Delivered
Approval
Committee approval
Awaiting sign-off
Wattle Creek
Sporting Club
AUTO
Member name
Danielle Kerr
Type
Premium
ID
2320044
Expires
31 Dec 2028
Added to Apple Wallet
Certificate of
Membership
Danielle Kerr
Wattle Creek Sporting Club
Premium · valid to 31 Dec 2028
Secretary
No. 2320044
New submission
Danielle Kerr · just now
Live
Form validated
Payment captured
Committee notified
Awaiting approval
Annual Application Form 2028
1,284runs · 100% completedRunning
Trigger
Application submitted
Form validated
Payment
Accept payment
$120 reconciled
Approval
Committee approval
Awaiting sign-off
Email
Send confirmation
Delivered
1Build any form, and the process behind it540×520
Renewal form
Safety waiver
Tick box
Junior member?
Conditional
Committee sign-off
Approval
Add a field
Rule
IfJunior = yes
Ask for guardian details
Require parent consent
No developer
Your process, not a template
Fields14
Rules3 conditional
ApprovalsCommittee
2One submission triggers everything that should happen next540×500
Run #4821
Danielle Kerr
09:14Form submitted✓
09:14Committee notified✓
09:14Confirmation emailed✓
09:15Payment link issued✓
09:22Payment reconciled✓
Waiting on you
1 item
Danielle Kerr
Renewal · $120 paid
DeclineApprove
Nothing chased
Six actions, one submission
NotificationsSent
Payment$120 reconciled
Manual steps0
3Issue cards, certificates and records automatically540×520
Issued
Status
Digital card
In wallet
Certificate
Emailed
Member record
Updated
Receipt
Reconciled
Certificate of
Membership
Danielle Kerr
Wattle Creek Sporting Club
Premium · valid to 31 Dec 2027
Secretary
No. 2320044
The same moment
Issued without asking
Digital cardApple & Google
CertificateGenerated
RecordUpdated
Positions Drag anything in the Revised row. It snaps to the rails at 2px. Values are authored pixels on the 468×420 frame. 
—

Cream stays. Variation comes from composition.

The panel control is still there to test the call: run the Board row through all five treatments and the three sections stay exactly as interchangeable in every one, because colour behind identical geometry doesn’t make the geometry less identical. Cream is set. Here’s the split that carries the variation instead.

Locked · never varies

The grid

  • Panel 468×420, 16px radius, cream
  • Inset 24px — context starts at 24, 24 and is the widest, faintest thing in the frame
  • Mid band y 150 — every second-tier element starts on this line and overlaps the context’s lower third
  • Floor y 444 and right line x 492 — the result card is pinned to both, so its height can change without moving the anchor
  • Breakout exactly 24px, never more, and only past one edge per element
  • Weight runs light top-left to dark bottom-right, so the eye lands on the payoff

Varies · by content

The archetype

  • Which of the ten you already drew — here: stacked check, time rail, decision fork
  • Which way the frame leans — 01 and 03 land bottom-right; 02 mirrors, because its graphic sits left of the text on the page
  • Where the mid tier sits on its line — x 72, right-anchored breaking right, x 96
  • How deep the context runs — seven rows, six rows, three rows

Varies · by meaning

Earned colour

The 4px rule on the result card is the one place colour changes, and content decides it: gold for automatic and good, red for expired or flagged, green for verified. A reader learns that in two pages. Decorative colour teaches nothing.

Ruled out

Panel colour per section

The panel is one shared element on a template behind sixteen CMS items, so per-section colour means template surgery repeated sixteen times. It also shifts visual weight between sections — the exact thing rule 5 says to hold constant while everything else moves.

Every position, measured

Read off the rendered DOM, not eyeballed. The three tiers share their anchors; only the mid tier’s x moves, and that’s the archetype talking.

SectionContextMid tierResultBreakout
Section 0124, 24 · w420x72, y150floor + right24 / 24
Section 0224, 24 · w300right −24, y150x108, floor24 / 24
Section 0324, 24 · w360x96, y150floor + right24 / 24

Mobile now clears. The template scales .ss-graphic to .66 inside a 300px-tall wrap under 600px. At 24px the tallest frame needs 293px and fits; the board’s 115px breakout needed 353px and was cut. Drop the width control to 300 to check it.

Section