SA Element Registry
Catalog
Admin
+ Add
Edit element
you-focus-pagebreak
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 You-Focus page-break banner. Dark Visible Depth gradient strip, Poppins throughout, full-white centered ALL-CAPS headline and fee-never-increases subline, and the approved sa-depth-button .on-dark CALL NOW pill (white fill, navy text, phone icon left; hover flips to navy depth gradient with Foundry-orange text and border). NO eyebrow/kicker. Self-contained scoped CSS; leaky global ALL-CAPS/button rules removed 2026-06-10.
When to use
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
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="yf-pagebreak" aria-label="You focus on getting better. We handle everything else."> <div class="yf-pagebreak__inner"> <h2 class="yf-pagebreak__title">You focus on getting better.<br>We handle everything else.</h2> <p class="yf-pagebreak__sub">Your fee never increases, even if your case goes to litigation or trial.</p> <a href="tel:5028888888" class="yf-pagebreak__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
.yf-pagebreak{background:linear-gradient(0deg,#000 0%,#0B212D 100%);color:#fff;text-align:center;padding:72px 24px;width:100%!important;max-width:none!important;margin:0!important;box-sizing:border-box} .yf-pagebreak *{box-sizing:border-box} .yf-pagebreak__inner{max-width:820px;margin:0 auto} .yf-pagebreak__title{font-family:'Poppins',sans-serif;font-weight:600;font-size:clamp(28px,3.4vw,38px);line-height:1.2;color:#fff!important;text-transform:uppercase;text-align:center;margin:0 auto 14px;max-width:820px} .yf-pagebreak__sub{font-family:'Poppins',sans-serif;font-size:17px;font-weight:600;color:#fff!important;text-align:center;margin:0 auto 28px;max-width:640px} .yf-pagebreak__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} .yf-pagebreak__call svg{fill:currentColor} .yf-pagebreak__call:hover,.yf-pagebreak__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){.yf-pagebreak{padding:56px 22px}.yf-pagebreak__call{font-size:16px;padding:14px 30px}}
Save changes
Cancel