cc-test-3 Designer Element Gallery
Standalone green-light artifact for the Campaign Flow Designer vocabulary. Review each labeled element as an individual style primitive, before approving composed page templates.
Standard Contract Notes
- commit_page.order-form omitted from gallery: verified on the composed checkout page; review the surrounding checkout primitives instead
Standard Contract Warnings
- client_specific_extensions.segmentation-grid is not approved in design-system.json
Shared / Landing
Full-width hero variant. Same semantic role as hero-stack, but visually bleeds to the viewport or page band.
Element Preview
Designer Element Gallery
Standalone renders of the Campaign Flow elements available to the Designer.
Primary page opener for the current archetype. Contains logo/badge/headline/subheadline and, where relevant, a CTA.
Element Preview
Designer Element Gallery
Standalone renders of the Campaign Flow elements available to the Designer.
Legal and support chrome reused across page types.
Optional content image or proof screenshot with alt/caption handling.
Learning/discovery bullets: concepts, curriculum points, or what the visitor will understand.
This block is for concepts, lessons, and ideas.
Use it when the copy says what someone will understand or learn:
- How to spot the current constraint.
- Why the obvious fix can create a second problem.
- What to change first when time is limited.
Short optional note immediately after a hero, usually one paragraph.
This is body copy inside the selected element. It should show the approved typography, spacing, and surface treatment without implying a campaign layout.
Sales-page narrative copy catch-all for normal H2/body flow that is not another named element.
This opening body section previews plain narrative copy before any styled box.
Section Heading
This section previews an H2 plus paragraph rhythm for normal body content.
Another Section
This second section checks repeated body-section rhythm and spacing.
Sales-page deliverables list: concrete things included in the offer.
What You Get
- Deliverable one with a concrete artifact.
- Deliverable two with a practical resource.
- Another tangible inclusion.
- Final deliverable item.
Free-registration logistics card: host, date/time, duration, location, and cost.
Workshop Details
- Host
- Host Name
- Date
- Wednesday, June 24, 2026 at 10:00 AM
- Duration
- 90 minutes
- Location
- Zoom (live)
- Cost
- Free
Host credibility/bio block.
Host Name
Bonus stack or named add-ons on a sales page.
Bonuses
Bonus 1
Decision Checklist
A short supporting paragraph for the first bonus item.
Bonus 2
Review Template
A second bonus body to verify spacing between bonus items.
Sales-page guarantee block.
Simple Guarantee
This guarantee block should read as a distinct reassurance surface while preserving body typography.
Styled sales commitment block with product/price/body/CTA/subtext.
Ready To Continue?
Example Offer
This card is the high-emphasis action moment.
Short supporting note under the CTA.
Frequently asked questions or objection-answering list.
Questions
Who is this for?
Use this to judge the FAQ rhythm and spacing.
What happens next?
This is a second answer so the stacked treatment is visible.
Sales-page social proof strip.
Designer Element Gallery
The offer became clear enough to sell without overexplaining it.
Sample Client
Mobile persistent CTA affordance.
Commit / Order
Checkout sidebar summary of product, price, bump row, and total.
Order Summary
Checkout sidebar what-you-get bullets.
What You Get
- How to spot the current constraint.
- Why the obvious fix can create a second problem.
- What to change first when time is limited.
Checkout sidebar proof card.
+$47k in 30 days
Restructured my coaching offer following the framework exactly. First two clients signed within 10 days.
Sam RiveraIndependent course creator
Paid checkout bump offer around the Gravity Forms option field.
Add the Implementation Cohort (4 weeks)
A live-cohort companion where your offer and pricing structure are reviewed each week.
- Weekly offer-review call, live and recorded.
- Pricing calculator and offer document templates.
- Private channel access for the cohort period.
Added to your total. Cohort starts the week after the live workshop.
Checkout-page guarantee reassurance.
Section Heading
This is body copy inside the selected element. It should show the approved typography, spacing, and surface treatment without implying a campaign layout.
Secure checkout/card trust microcopy and payment badge.
Protected payment
Instant confirmation
Visual scaffold around the Stripe/card field.
Payment Field
Confirmation
Confirmation-page receipt/hero headline.
You’re in
Confirmed for the element preview.
This headline stack previews the confirmation-page hero treatment.
Confirmation instructions for what happens next.
What Happens Next
- Open the confirmation email.
- Add the date to your calendar.
- Bring one useful note.
- Watch for the reminder.
Confirmation focal card summarizing the confirmed workshop/session.
Example Workshop – Wednesday, June 24, 2026
This card previews the confirmation workshop-summary treatment.
It should be visually distinct from next steps and support copy.
The body type should remain consistent inside this card.
Confirmation prep bullets: what to bring, think about, or do before the session.
Bring This
- One current problem.
- One question you want answered.
- A place to take notes.
Confirmation support/contact block.
Need help?
This is body copy inside the selected element. It should show the approved typography, spacing, and surface treatment without implying a campaign layout.
Registration
Plain prose block, especially the free-workshop opening lead after the hero.
This is body copy inside the selected element. It should show the approved typography, spacing, and surface treatment without implying a campaign layout.
Free registration form close/opt-in box.
Register
Use this form treatment to verify the registration box style.
Client-Specific
Client-specific or legacy element; confirm purpose before approval.
Section Heading
This is body copy inside the selected element. It should show the approved typography, spacing, and surface treatment without implying a campaign layout.