SA Element Registry
Catalog
Admin
+ Add
Edit element
sa-sigquote-pagebreak
Name (slug)
Version
Category
Heroes & Top-of-Page
Social Proof
Differentiators
Content Blocks
Sidebar
CTA / Footer
Office Anchoring
Status
Live
Beta
Deprecated
Description
Slim full-width signature-quote divider band. Thin lines run out to both edges so the quote reads as a page break. Foundry-orange lines by default; add .sq-blue for navy lines. Light surface, payoff on its own line, lowercase '- sam aguiar' sized to the quote. Add .sq-poppins for the sans version.
When to use
A divider between two content sections that doubles as a brand beat. Use on top trafficked pages, one per page.
Source skill
Rules (one per line, leading dash optional)
Tokens only: Foundry orange #D97706, Foundry Deep #B45309, Navy #0B212D. Orange is text/rule/glyph only, never a fill. Quote wording is fixed: Our job isn't done until clients leave saying, 'Wow, that was an amazing experience.' Do not paraphrase. The payoff phrase 'Wow, that was an amazing experience.' always breaks onto its own line. Author line is intentionally lowercase '- sam aguiar' (founder signature, NOT a Google reviewer, so the ALL-CAPS reviewer-name rule does not apply here). Author line is set to the same font-size as the quote. One font family per instance. Default shown; swap with the .sq-poppins or .sq-georgia modifier. Never mix two families in one element. 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
Drop-in block. Orange lines by default; add 'sq-blue' to .sq-break for navy lines; add 'sq-poppins' for Poppins. Lines hide and the layout stacks centered below 680px. Run pre-publish-qa + playwright-visual-qa after deploy. 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
<div class="sq-break"> <span class="sq-break__ln"></span> <div class="sq-break__mid"> <blockquote>Our job isn’t done until clients say,<br><em>‘Wow, that was an amazing experience.’</em></blockquote> <div class="sq-break__by">- Sam Aguiar</div> </div> <span class="sq-break__ln"></span> </div>
CSS
.sq-break{--nv:#0B212D;--or:#D97706;--ord:#B45309;font-family:Georgia,'Times New Roman',serif;max-width:1100px;margin:0 auto;background:#fafafa;border-top:1px solid #e7eaed;border-bottom:1px solid #e7eaed;padding:32px 44px;display:flex;align-items:center;gap:26px;} .sq-break.sq-poppins{font-family:'Poppins',system-ui,sans-serif;} .sq-break__ln{flex:1;height:2px;background:var(--or);} .sq-break.sq-blue .sq-break__ln{background:var(--nv);} .sq-break__mid{text-align:center;flex:0 1 auto;} .sq-break blockquote{font-weight:500;font-size:clamp(18px,2vw,25px);line-height:1.3;letter-spacing:-.01em;color:var(--nv);border:0;margin:0;} .sq-break em{font-style:italic;color:var(--ord);} .sq-break__by{margin-top:12px;font-weight:500;font-size:clamp(18px,2vw,25px);line-height:1.1;color:var(--nv);} @media(max-width:680px){.sq-break__ln{display:none;}.sq-break{flex-direction:column;gap:0;text-align:center;}}
Save changes
Cancel