SA Element Registry
Catalog
Admin
+ Add
Edit element
sa-pagebreak-playbook
Name (slug)
Version
Category
Heroes & Top-of-Page
Social Proof
Differentiators
Content Blocks
Sidebar
CTA / Footer
Office Anchoring
Status
Live
Beta
Deprecated
Description
Full-bleed insurance-adversary page-break banner. Dark Visible Depth gradient strip, Poppins, white centered ALL-CAPS headline, claim-number subline, approved on-dark depth CALL NOW pill with left phone icon. Sibling of you-focus-pagebreak (36). Scoped CSS.
When to use
Mid-page break on pages discussing insurance company tactics, lowball offers, or claim handling. Good after a body section about the adjuster process.
Source skill
Rules (one per line, leading dash optional)
Scoped CSS only. Never add unscoped global selectors (h1/h2/h3 or site-wide button lists) to this element. Button is the approved sa-depth-button .on-dark spec: white fill, navy text, pill radius; hover flips to navy depth gradient with Foundry-orange text and border. Orange is never a resting fill here. CALL NOW with phone icon to the LEFT; label renders ALL CAPS via text-transform. Headline is an H2, ALL CAPS via scoped text-transform, centered. No eyebrow/kicker, no compound headers. Phone: tel:5028888888 (Louisville). Swap to tel:8598888000 on Lexington pages. Full-bleed dark Visible Depth strip; place between content blocks as a page break. Duplicate UVP guard (2026-06-15): Use only one primary UVP/payoff block with this same message on a page or post. Do not pair this element with another Get More, You Focus, BSG always-get-more, sa-fcta-blk, generic white CTA, or sa-bottom-get-more-fw block that repeats the same primary message. During QA, keep the strongest single block and replace any other same-message break with a different visual element or a different UVP angle.
Live reference URL
Deployment notes
New 2026-06-10; Beta pending Sam approval. Promote to Live once approved. Duplicate UVP guard (2026-06-15): Use only one primary UVP/payoff block with this same message on a page or post. Do not pair this element with another Get More, You Focus, BSG always-get-more, sa-fcta-blk, generic white CTA, or sa-bottom-get-more-fw block that repeats the same primary message. During QA, keep the strongest single block and replace any other same-message break with a different visual element or a different UVP angle.
HTML
<section class="sa-pb-playbook" aria-label="To the insurance company you're a claim number. To us, you're a future success story."> <div class="sa-pb-playbook__inner"> <h2 class="sa-pb-playbook__title"> <span class="sa-pb-playbook__t1">To the insurance company, you’re a claim number.</span> <span class="sa-pb-playbook__t2">To us, you’re a <span class="sa-pb-playbook__orange">future success story.</span></span> </h2> <a href="tel:5028888888" class="sa-pb-playbook__call" aria-label="Call now"><svg viewBox="0 0 24 24" width="19" height="19" fill="currentColor" aria-hidden="true"><path d="M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.6c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.3 0 .7-.2 1l-2.4 2.2z"/></svg><span>Call Now</span></a> </div> </section>
CSS
.sa-pb-playbook{background:repeating-linear-gradient(135deg,rgba(217,119,6,0.03) 0px,rgba(217,119,6,0.03) 1px,transparent 1px,transparent 48px),linear-gradient(150deg,#06121A 0%,#0B212D 45%,#0A1E2C 100%);color:#fff;text-align:center;padding:72px 24px;width:100%!important;max-width:none!important;margin:0!important;box-sizing:border-box;position:relative;overflow:hidden;box-shadow:inset 6px 0 0 #D97706,inset -6px 0 0 #D97706} .sa-pb-playbook *{box-sizing:border-box} .sa-pb-playbook__inner{max-width:820px;margin:0 auto;position:relative;z-index:1} .sa-pb-playbook__title{font-family:'Poppins',sans-serif;font-weight:700;line-height:1.3;text-transform:uppercase;text-align:center;margin:0 auto 32px;max-width:820px;display:block} .sa-pb-playbook__t1{display:block;font-size:clamp(26px,3.2vw,36px);font-weight:700;color:#fff!important;margin-bottom:10px} .sa-pb-playbook__t2{display:block;font-size:clamp(26px,3.2vw,36px);font-weight:700;color:#fff!important} .sa-pb-playbook__orange{color:#D97706!important} .sa-pb-playbook__call{display:inline-flex;align-items:center;gap:10px;font-family:'Poppins',-apple-system,Segoe UI,Roboto,sans-serif;font-weight:700;font-size:17px;line-height:1;text-transform:uppercase;letter-spacing:.4px;text-decoration:none;padding:16px 36px;border-radius:999px;cursor:pointer;background:#FFFFFF!important;color:#0B212D!important;border:2px solid #FFFFFF!important;box-shadow:0 6px 18px rgba(0,0,0,.22);transition:color .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease} .sa-pb-playbook__call svg{fill:currentColor} .sa-pb-playbook__call:hover,.sa-pb-playbook__call:focus-visible{background:linear-gradient(0deg,#000000 0%,#0B212D 100%)!important;color:#D97706!important;border-color:#D97706!important;box-shadow:0 10px 26px rgba(11,33,45,.36);transform:translateY(-2px)} @media (max-width:768px){.sa-pb-playbook{padding:56px 22px;box-shadow:inset 4px 0 0 #D97706,inset -4px 0 0 #D97706}.sa-pb-playbook__call{font-size:16px;padding:14px 30px}.sa-pb-playbook__t1,.sa-pb-playbook__t2{font-size:clamp(20px,5vw,28px)}}
Save changes
Cancel