SA Element Registry
← Back to catalog
Content Blocks Live

sa-pagebreak-results v2026-06-16b

Full-bleed results-authority page-break banner. Dark Visible Depth gradient strip, Poppins, white centered ALL-CAPS headline, Google-rating subline, approved on-dark depth CALL NOW pill with left phone icon. Sibling of you-focus-pagebreak (36). Scoped CSS.

Source skill: you-focus-pagebreak · Updated 2026-06-16 17:05:22

Edit

Live preview

Open ↗

When to use

Mid-page break near results or review content. Rotate authority signals: do not stack with a reviews slider or results ticker immediately adjacent.

Rules & constraints

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-results" aria-label="Life-changing results. Fast.">
  <div class="sa-pb-results__inner">
    <h2 class="sa-pb-results__title">Life-changing results. Fast.</h2>
    <div class="sa-pb-results__rule" aria-hidden="true"></div>
    <p class="sa-pb-results__stars" aria-hidden="true">&#9733;&#9733;&#9733;&#9733;&#9733;</p>
    <p class="sa-pb-results__sub">1,000+ Five-Star <svg class="sa-google-g" width="18" height="18" viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path fill="#4285F4" d="M45.12 24.5c0-1.56-.14-3.06-.4-4.5H24v8.51h11.84c-.51 2.75-2.06 5.08-4.39 6.64v5.52h7.11c4.16-3.83 6.56-9.47 6.56-16.17z"/><path fill="#34A853" d="M24 46c5.94 0 10.92-1.97 14.56-5.33l-7.11-5.52c-1.97 1.32-4.49 2.1-7.45 2.1-5.73 0-10.58-3.87-12.31-9.07H4.34v5.7C7.96 41.07 15.4 46 24 46z"/><path fill="#FBBC05" d="M11.69 28.18C11.25 26.86 11 25.45 11 24s.25-2.86.69-4.18v-5.7H4.34C2.85 17.09 2 20.45 2 24s.85 6.91 2.34 9.88l7.35-5.7z"/><path fill="#EA4335" d="M24 10.75c3.23 0 6.13 1.11 8.41 3.29l6.31-6.31C34.91 4.18 29.93 2 24 2 15.4 2 7.96 6.93 4.34 14.12l7.35 5.7c1.73-5.2 6.58-9.07 12.31-9.07z"/></svg> Reviews</p>
    <a href="tel:5028888888" class="sa-pb-results__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-results{background:radial-gradient(ellipse 720px 280px at 50% 50%,rgba(217,119,6,0.13) 0%,transparent 70%),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;position:relative;overflow:hidden}
.sa-pb-results::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,transparent,#B45309 20%,#D97706 50%,#B45309 80%,transparent)}
.sa-pb-results::after{content:'';position:absolute;bottom:0;left:0;right:0;height:5px;background:linear-gradient(90deg,transparent,#B45309 20%,#D97706 50%,#B45309 80%,transparent)}
.sa-pb-results *{box-sizing:border-box}
.sa-pb-results__inner{max-width:820px;margin:0 auto;position:relative;z-index:1}
.sa-pb-results__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 16px;max-width:820px}
.sa-pb-results__rule{width:72px;height:3px;background:linear-gradient(90deg,#B45309,#D97706,#B45309);margin:0 auto 18px;border-radius:2px}
.sa-pb-results__stars{font-size:22px;letter-spacing:4px;color:#D97706!important;margin:0 auto 10px;line-height:1}
.sa-pb-results__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}
.sa-pb-results__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-results__call svg{fill:currentColor}
.sa-pb-results__call:hover,.sa-pb-results__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-results{padding:56px 22px}.sa-pb-results__call{font-size:16px;padding:14px 30px}}